如何显示已经选择的 Angular Component mat-chip？

Question

我想根据“可用”属性显示用户打开对话框时已选择的垫片列表。

这是我的 HTML 模板：

`

  <mat-chip-list formControlName="sizes" #chipList [multiple]="true" [selectable]="true">

      <mat-chip #chipRef
        *ngFor="let gearSize of gearItemForm.controls['sizes'].value"
        [ngClass]=""
        [selected]="gearSize.available"  
        (click)="gearSize.available = !gearSize.available; onSelectedChipSize()"  
        [color]="gearSize.color">{{ sizeEnum[gearSize.size] }}, {{ gearSize.available }}  
      </mat-chip>

    </mat-chip-list>

      <input
        matInput
        formControlName="sizes"
        placeholder="Gear sizes..."
        [matChipInputFor]="chipList"
        style="display: none;"
        class="gear-size-label"
      >

    <mat-error *ngIf="gearItemForm.get('sizes').invalid && gearItemForm.get('sizes').touched">Please select a size</mat-error>

  </mat-form-field>     
`

只要gearSize.available 是true 或false，它不会影响mat-chip 上的[selected] 属性，并且永远不会选择芯片组件。用户总是必须手动更改芯片的颜色。如果available 属性为true，如何显示已选择的mat-chip 列表？

Answer 1

我尝试创建一个基本 POC 来验证您的需求。这就是实现的样子。 在组件中，我有一个这样的对象数组：

 import {Component} from '@angular/core';

 /**
  * @title Basic chips
  */
 @Component({
    selector: 'chips-overview-example',
    templateUrl: 'chips-overview-example.html',
    styleUrls: ['chips-overview-example.css'],
  })
  export class ChipsOverviewExample {

     gearItem = [{'item': 'gearItem1', value: true},{'item': 'gearItem2', value: 
                 false}];
  }  

然后在html中：

   <mat-chip-list>
      <mat-chip *ngFor="let gearSize of gearItem" [selected]="gearSize.value"></mat-chip>
   </mat-chip-list>  

这似乎工作正常，一个工作的 stackblitz 链接在这里：MatchipImplementation