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

问题描述

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

我在 mat-chip 上使用 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屋！