Невозможно выбрать микросхему / чипы Angular Material и указать, что этот чип был выбран? - PullRequest
Новая
       29

Невозможно выбрать микросхему / чипы Angular Material и указать, что этот чип был выбран?

0 голосов
/ 17 апреля 2019

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

У меня есть следующий 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", но это приводит к тому же обычному списку, что и ожидалось.

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

1 Ответ

1 голос
/ 17 апреля 2019

Ваши наблюдения верны: нет никаких указаний на то, выбран ли один чип или нет, используя только [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>
...