垫片选择事件发射器未触发? [英] mat-chip select event emitter not firing?

问题描述

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

我在垫芯片上使用selectionChange @Output来查看芯片选择的结果，但是似乎eventEmitter没有在芯片选择上触发?

I'm using the selectionChange @Output on a mat-chip to see the resulting behavior of chip selection but it seems that the eventEmitter isn't firing on chip selection?

.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;
}

在这种情况下，单击选择根本不发出任何事件.这是还在开发中吗，还是选择意味着与我所想的有所不同?

In this case, no event is emitted at all on click selection. Is this something that is still in development, or does selection mean something different from what I am thinking of?

推荐答案

由于该组件仍在开发中，因此不确定该组件的用途是什么，但这似乎与提供禁用和启用可选内容的接口有关.，以及其他一些功能.

Not sure what the purpose of this component is, since it's still a work in progress, but it seems to be about providing an interface to disabling and enable selectable content, and some other features.

由于未激活选定项，因此看不到任何事件触发.

You're not seeing any events firing because you haven't activated selected.

在您的情况下，类似的方法将解决该问题.

In your case, something like this will resolve it.

  <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 指令

Also if you want to make this more generic, resort to *ngFor directive

以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'}
  ];

这篇关于垫片选择事件发射器未触发?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！