如何在 Angular 中的筹码旁边放置文本输入

Question

我正在尝试制作可以显示标签、输入和下拉菜单的垫子表单字段，如下面的设计一样，但我不确定如何实现，所以有人可以帮助我。我已经尝试了几个小时的不同方法，但仍然找不到使它起作用的方法。如果有人能给我建议或帮助，我将不胜感激。

我只是想将文本输入始终放在筹码旁边（如果用户放置大量筹码，可能会像我现在拥有的那样扩展）并且在旁边还有下拉选项（图标）喜欢下面的设计

<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 中的筹码旁边放置文本输入

how to place text input beside of chips in Angular

html

input

angular

mat-form-field