mat复选框在同一次单击时针对两个元素

Question

我有一个mat-checkbox，它也是移动版本的一部分。

当我们有两个独立的部分时，一个用于桌面，一个则用于移动。桌面<mat-checkbox>可以正确地选择和取消选择，而当我们单击时，移动选项会触发桌面版本复选框，而不仅仅是选择和取消选中移动版本。

如何让<mat-checkbox>分别独立处理这两个事件？

HTML:

<div class="class-a">
<label
[ngClass]="{'class-b': valueTrigger}">
<mat-checkbox
class="checkbox"
[(ngModel)]="valueTrigger"
(input)="toggleHasTrigger($event.target.checked)"
id="test"
type="checkbox"
name="testing" ngDefaultControl
>
I am here!
</mat-checkbox>
</label>
</div>

TS:

initValueTrigger(): void {
this.valueTrigger = !this.asset.Unchecked;
this.toggleHasTriggerEvent.emit(this.valueTrigger);
}

toggleHasTrigger(toggleValue: boolean): void {
this.asset.Unchecked = !toggleValue;
this.valueTrigger = toggleValue;
this.toggleHasTriggerEvent.emit(this.valueTrigger);
}

Answer 1

您可能需要为移动和web视图的复选框提供单独的ID

例如：test_web and test_mobile

Answer 2

在上面的答案之后，我使用了for而不是id，以使复选框具有单独的ID：

for="test"