Блог

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

Вот мой 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 amp;amp; gearItemForm.get('sizes').touched">Please select a size</mat-error>

  </mat-form-field>     
`
  

Всякий раз, когда gearSize.available есть true или false , это не влияет на [selected] свойство mat-chip , и компонент chip никогда не выбирается. Пользователю всегда приходится физически изменять цвет чипа вручную. Как я могу отобразить уже выбранный mat-chip список, если available свойство является true ?

Я попытался создать базовый 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