gpt4 book ai didi

angular - 垫片选择事件发射器不触发?

转载 作者:太空狗 更新时间:2023-10-29 18:08:00 25 4
gpt4 key购买 nike

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

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

最佳答案

不确定这个组件的目的是什么,因为它仍在进行中,但它似乎是关于提供一个接口(interface)来禁用和启用可选择的内容,以及一些其他功能。

你没有看到任何事件触发,因为你没有激活选择。

在您的情况下,类似这样的事情将解决它。

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

关于angular - 垫片选择事件发射器不触发?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47961933/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com