英文:
How to embed the toggle button into the mat-options?
问题
I need to embed the toggle button or radio button inside the mat-options list. The desired design is as follows.
问题:
我已经使用以下代码将切换按钮添加到选项列表中，但是点击切换按钮会选中或取消选项，而不是更改切换状态。
<mat-option (click)="handleSelected(item)" *ngFor="let item of defaultSelectValue | dataSearch : field.searchCtrl.value" [value]="field.keySelect ? item[this.field.selectKey] : item">
{{ item[this.field.selectValue] }}
<mat-slide-toggle></mat-slide-toggle>
</mat-option>
请指导我如何以使两者相应工作的方式来实现它？
英文:
I need to embed the toggle button or radio button inside the mat-options list. The desired design is as follows.
ISSUE:
I have added the toggle button inside the options list with the following code but by clicking on the toggle button the option is checked or unchecked rather than changing the toggle state.
<mat-option (click)="handleSelected(item)" *ngFor="let item of defaultSelectValue | dataSearch : field.searchCtrl.value" [value]="field.keySelect ? item[this.field.selectKey] : item">
{{ item[this.field.selectValue] }}
<mat-slide-toggle></mat-slide-toggle>
</mat-option>
Please guide me that, How can I achieve it in a way that both things work correspondingly?
答案1
得分: 0
以下是翻译好的部分：
我们可以通过事件传播的帮助来实现这一点，如下面的代码片段所示。
<mat-form-field>
<mat-label>选择选项</mat-label>
<mat-select [(ngModel)]="selectedOptions" multiple>
<mat-option *ngFor="let option of options" [value]="option.value">
<span>{{ option.label }}</span>
<mat-slide-toggle (click)="$event.stopPropagation()"></mat-slide-toggle>
</mat-option>
</mat-select>
</mat-form-field>
英文:
We can achieve this with the help of event propagation as shown in below code snippet.
<mat-form-field>
<mat-label>Select options</mat-label>
<mat-select [(ngModel)]="selectedOptions" multiple>
<mat-option *ngFor="let option of options" [value]="option.value">
<span>{{ option.label }}</span>
<mat-slide-toggle (click)="$event.stopPropagation()"></mat-slide-toggle>
</mat-option>
</mat-select>
</mat-form-field>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论