如何在点击来自其他组件的特定事件时取消选中该复选框

Question

我需要你的帮助。我试图取消对来自另一个组件/外部组件发出事件的事件单击的复选框，基于发出的值，我想取消选中该复选框。

您可以在下面的代码段中找到我尝试过的代码，但我得到的是null，无法取消选中。

<mat-menu #childMenu="matMenu" [overlapTrigger]="false">
    <span *ngFor="let child of items">
      <!-- Handle branch node menu items -->
      <span *ngIf="child.children && child.children.length > 0">
        <button mat-menu-item color="primary" [matMenuTriggerFor]="menu.childMenu">
          <span>{{child.displayName}}</span>
        </button>
        <app-menu-item #menu [items]="child.children"></app-menu-item>
      </span>
      <!-- Handle leaf node menu items -->
      <span *ngIf="!child.children || child.children.length === 0">
        <mat-checkbox style="display: block; margin-left: 5px; padding: 5px;"
             id={{child.key}}
             (click)="$event.stopPropagation()" (change)="onSelectMetrics($event, child)">
          <span>{{child.displayName}}</span>
        </mat-checkbox>
      </span>
    </span>
  </mat-menu>

 

  ngOnInit() {
    this.metricService.metricUnselected
      .subscribe(
        (keyValue) => {
          console.log(`keyValue = ${keyValue}`)
         let element = document.getElementById(keyValue) as HTMLInputElement;
         console.log(element);
         element.checked = false;
        }
      )
  }

这是sample.json，它可以帮助我创建动态drowndown具有复选框作为值。 "displayName": "Select Metrics", "children": [ { "displayName": "Cache metrics", "children": [ { "displayName": "Read hit(%)", "key": "rhit_perc" }, { "displayName": "Write hit(%)", "key": "whit_perc", "labelName": "Cache metrics" },

`

我已经订阅了一个事件并获得了发出的值。在mycase keyValue中，我要基于keyValue取消选中该复选框。