Как вывести на экран уже выбранный чип-чип Angular Component?

Question

Я хотел бы отобразить список мат-чипов, которые уже выбраны, когда пользователь открывает диалоговое окно на основе свойства 'available'.

Вот мой 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, он не влияет на свойство [selected] для mat-chip, и компонент чипа никогда не выбирается. Пользователь всегда должен физически менять цвет чипа вручную. Как отобразить уже выбранный список mat-chip, если свойство available равно true?

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>  

Это, кажется, работает нормально, и рабочая ссылка на стек находится здесь: MatchipImplementation