我正在尝试制作可以显示标签、输入和下拉的 mat 表单字段,如下面的设计,但我不知道如何实现这一点,所以任何人都可以帮助我。我已经尝试了几个小时的不同方法,但仍然找不到使它起作用的方法。如果有人可以给我建议或帮助,将不胜感激。
我只是想将文本输入始终放在筹码旁边(如果用户放了很多筹码,可能会像我现在所拥有的那样扩展),并且在侧面也有下拉选项(图标),如下面的设计。
<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>
这是我正在尝试做的设计
这就是我现在所拥有的