Блог

Я не могу выполнить выбор чипа и указать пользователю, что этот чип был выбран.

У меня есть следующий код шаблона html:

 <mat-chip-list [multiple]="true" [selectable]="true">
  <mat-chip selected (selectionChange)="onSelectedChip($event)" [selectable]="true"  *ngFor="let size of sizes | sizeEnumToSize">{{ size }}</mat-chip>
</mat-chip-list>
  

Изначально я просто пытаюсь, чтобы все чипы находились в выбранном состоянии. Я бы ожидал, что чип визуально изменит свое состояние, чтобы показать пользователю, что он был выбран. Я также пытался выполнить [selected]=»true», но это приводит к тому же обычному списку, что и ожидалось.

Чего мне здесь не хватает?

Ваши наблюдения верны: нет указания, выбран ли отдельный чип или нет, используя только [selectable]="true" . Я думаю, вам нужно boolean значение, чтобы указать состояние каждого чипа.

Что-то вроде:

 // TS
sizes = [{ selected: true, name: 'Foo' }, { selected: true, name: 'Bar' }];

// HTML
<mat-chip-list [multiple]="true" [selectable]="true">
  <mat-chip *ngFor="let size of sizes"
            [selected]="size.selected"
            (click)="size.selected = !size.selected">{{size.name}}</mat-chip>
</mat-chip-list>