Question

我正在尝试使mat表单字段可以像下面的设计那样显示标签，输入和下拉菜单，但是我不确定如何实现这一点，因此任何人都可以帮助我。我已经尝试了几种方法了几个小时，但仍然找不到使它起作用的方法。如果有人可以给我建议或帮助，我们将不胜感激。

我只是试图将文本输入始终放置在Chips旁边（如果用户放置了很多筹码，则可能像我现在所拥有的那样扩展），并且在下拉菜单中也有下拉选项（图标），例如设计如下。

<mat-chip-list *ngIf="editMode">
    <mat-form-field class="form" appearance="fill">

        <!--show Tags-->
        <ng-container *ngFor="let chip of chips" class="add-tag-chip" (click)="displayTagInput()">
                <mat-chip [selectable]="selectable" [removable]="removable" (removed)="removeTags(chip)">
                    {{chip.tag}}
                    <mat-icon matChipRemove *ngIf="chip.pending !== true && removable" matTooltip="Remove a tag">cancel</mat-icon>
                    <mat-spinner *ngIf="chip.pending === true" [diameter]="16" mode="indeterminate"></mat-spinner>
                </mat-chip>
        </ng-container>

        <!--Text Input (supposed to be on the side of Tags)-->
            <input matInput [(ngModel)]="tagIn" [matAutocomplete]="auto" placeholder="New Tag"  (keyup.enter)="addTag()" />

        <!--For Drop Down List-->
            <mat-autocomplete #auto="matAutocomplete">
                <mat-option *ngFor="let tag of filteredTags | async" [value]="tag">
                    {{tag}}
                </mat-option>
            </mat-autocomplete>

    </mat-form-field>
</mat-chip-list>

这是我要尝试的设计

这就是我现在拥有的

Answer 1

为什么不按文档中的说明使用它？我还发现this stackblitz正是您想要的。这是html代码：

<mat-form-field class="demo-chip-list">
  <mat-chip-list #chipList>
    <mat-chip
      *ngFor="let fruit of fruits"
      [selectable]="selectable"
      [removable]="removable"
      (removed)="remove(fruit)">
      {{fruit}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <input
      placeholder="New fruit..."
      #fruitInput
      [formControl]="fruitCtrl"
      [matAutocomplete]="auto"
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      [matChipInputAddOnBlur]="addOnBlur"
      (matChipInputTokenEnd)="add($event)"
    />
  </mat-chip-list>
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
    <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
      {{ fruit }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

请注意，没有ng-container（它们在您的代码中似乎不是必需的），并且mat-form-field标记将整个内容包装了起来。在您的代码中，它是mat-chip-list的子代。

[编辑]：我明白了。这是代码：

.css：

/* ::ng-deep needed to only target your component (it's deprecated but have not replacement for the moment) */
.your-component ::ng-deep .mat-form-field-infix {
  display: flex !important
}

/* Change the placeholder to stick to the same position as if your input is focused, not really good */
.your-component ::ng-deep.mat-form-field-label {
    transform: translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px) !important;
}

.html：

<mat-chip-list>
    <mat-form-field>
    <!-- ng-container is now a span -->
        <span *ngFor="let fruit of fruits" (click)="displayTagInput()">
            <mat-chip [selectable]="selectable" [removable]="removable" (removed)="removeTags(chip)">
                {{fruit}}
                <mat-icon matChipRemove matTooltip="Remove a tag">cancel
                </mat-icon>
            </mat-chip>
        </span>

        <input matInput [(ngModel)]="tagIn" [matAutocomplete]="auto2" placeholder="New Tag..."  (keyup.enter)="addTag()" />

        <mat-autocomplete #auto2="matAutocomplete" (optionSelected)="selected($event)">
            <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
                {{ fruit }}
            </mat-option>
        </mat-autocomplete>

    </mat-form-field>
</mat-chip-list>

这里是the demo ons tackblitz。请注意，它并不完美。我不得不用css强制占位符的收缩效果（我认为是因为mat-form-field位于mat-chip-list内部）。

此外，由于我删除了一些内容使其更加清晰，因此您将不得不使用自己的代码，芯片去除方法等对其进行测试。

希望它会有所帮助：）

如何在Angular中将文本输入放置在芯片旁边

1 个答案: