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

Question

我正在尝试制作可以显示标签、输入和下拉的 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>

这是我正在尝试做的设计

这就是我现在拥有的

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 内部）。

另外，由于我删除了一些以使其更清晰，因此您必须使用自己的代码、芯片删除方法等对其进行测试。

希望对你有帮助:)