javascript - 如何修复未显示的芯片数据

因此，我需要在第一个“类型”列中使用我的芯片。当我将数据插入类型的第二列时。它将创建一个芯片数据。

我希望该芯片数据也显示在第一列中。但我想不通，有人可以帮忙吗？

  <div fxLayout="column" fxFlex="30" class="mr-8">
  <div *ngIf="mode === 'edit'" class="mb-8" fxLayout="row" fxLayoutAlign="start start">
      <mat-form-field appearance="outline" fxFlex>
          <mat-label>Types</mat-label>
        <mat-chip-list #chipList>
            <mat-chip *ngFor="let type of types" formControlName="type"></mat-chip>
            <input name="type" placeholder="Types" matInput>
        </mat-chip-list>
      </mat-form-field>
  </div>

  <div *ngIf="mode === 'edit'" class="mb-8" fxLayout="row" fxLayoutAlign="start start">
    <mat-form-field appearance="outline" fxFlex>
        <mat-label>Types</mat-label>
      <mat-chip-list #chipList>
          <mat-chip *ngFor="let type of types"
              [selectable]="selectable"
              [removable]="removable"
              (removed)="remove(type)">
              {{type}}
              <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
          </mat-chip>
          <input name="type" [matChipInputFor]="chipList" placeholder="Types"
          [matChipInputFor]="chipList"
          [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
          [matChipInputAddOnBlur]="addOnBlur"
          (matChipInputTokenEnd)="add($event)" matInput>
      </mat-chip-list>
    </mat-form-field>
  </div>

最佳答案

我认为您错过了第一分区的插值功能。只需在第6行添加{{type}}，如下所示。

...
<mat-chip-list #chipList>
    <mat-chip *ngFor="let type of types" formControlName="type">{{type}}</mat-chip>
    <input name="type" placeholder="Types" matInput>
</mat-chip-list>
...

关于javascript - 如何修复未显示的芯片数据，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56033551/