Как исправить данные чипов не отображаются

Question

Так что мне нужно, чтобы мои фишки работали в первом столбце Types.Когда я вставляю данные во второй столбец типов.это создаст данные чипа.

Я хочу, чтобы данные чипа также отображались в первом столбце.но я не могу понять, кто-нибудь может помочь?

  <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

Это должно работать

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

Answer 2

Я думаю, что вы пропустили интерполяцию в первом div. Просто добавьте {{type}} в строку 6, как показано ниже.

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