mat-chip选择事件发射器没有发射？

Question

Plunkr:http://plnkr.co/edit/y4e4jS89gOxRKQOyUW2r？p =preview

我在mat-chip上使用selectionChange @Output来查看芯片选择的结果,但似乎eventEmitter没有触发芯片选择？

html的:

<mat-chip-list>
  <mat-chip (selectionChange)="changeSelected($event)">Papadum</mat-chip>
  <mat-chip (selectionChange)="changeSelected($event)">Naan</mat-chip>
  <mat-chip (selectionChange)="changeSelected($event)">Dal</mat-chip>
</mat-chip-list>

<p>Currently Selected: {{selected}}</p>

.TS:

selected: string;

changeSelected(e) {
  console.log(e);
  this.selected = e.value;
}

在这种情况下,单击选择时根本不会发出任何事件.这是一个仍在开发中的东西,还是选择意味着与我的想法不同？

Answer 1

不确定这个组件的用途是什么,因为它仍在进行中,但它似乎是提供一个禁用和启用可选内容的界面,以及一些其他功能.

您没有看到任何事件被触发,因为您尚未激活已选中.

在你的情况下,这样的事情将解决它.

  <mat-chip-list>
    <mat-chip [selected]="state1" (selectionChange)="changeSelected($event)" (click)="state1=!state1">Papadum</mat-chip>
    <mat-chip [selected]="state2" (selectionChange)="changeSelected($event)" (click)="state2=!state2"> Naan</mat-chip>
    <mat-chip [selected]="state3" (selectionChange)="changeSelected($event)" (click)="state3=!state3"> Dal</mat-chip>
  </mat-chip-list>

此外,如果你想使这更通用,诉诸*ngFor指令

在HTML中

  <mat-chip-list>
    <mat-chip *ngFor="let chip of chips" [selected]="chip.state" (selectionChange)="changeSelected($event)" (click)="chip.state=!chip.state">{{chip.name}}</mat-chip>
  </mat-chip-list>

在ts

  chips = [
    {name: 'Papadum'},
    {name: 'Naan'},
    {name: 'Dal'}
  ];

Answer 2

这是一个示例，我可以使用它来使其工作。即使默认选择类别也有效。您也可以使用我在演示中使用的select()方法来代替。selectViaInteraction()

HTML：

<mat-chip-list #chipList [multiple]="true" [selectable]="true">
  <mat-chip *ngFor="let category of categories" #chip="matChip" (click)="category.selected ? chip.deselect() : chip.selectViaInteraction()" [selected]="category.selected" [selectable]="true" class="leadr-category-chip" (selectionChange)="changeSelected($event, category)">
    {{category.name}}
    <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
  </mat-chip>
</mat-chip-list>

TS：

changeSelected($event, category): void {
  category.selected = $event.selected;
}

样本：

this.categories = [
  {
    name: 'Category 1',
    selected: false
  },
  {
    name: 'Category 2',
    selected: true
  },
  {
    name: 'Category 3',
    selected: false
  },
  {
    name: 'Category 4',
    selected: true
  },
  {
    name: 'Category 5',
    selected: false
  }
];