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

Question

所以我需要让我的芯片在第一类型列中运行。当我将数据插入类型的第二列时。它将创建芯片数据。

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

  <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>

Answer 1

我认为您错过了第一格插值。只需在第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>
...

Answer 2

这应该有效

  <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">{{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>