Materi Sudut cara memilih komponen di JS

Saya memiliki aplikasi web sudut menggunakan bahan sudut. Dalam HTML saya, saya memiliki dua ButtonToggles yang dapat Anda aktifkan dengan event handler klik sederhana yang saya tangani sendiri. Namun, harus ada cara untuk mengganti tombol dengan pintasan keyboard. Saya memiliki pendengar acara penekanan tombol yang mencegat penekanan tombol dengan benar, tetapi saya tidak tahu bagaimana saya dapat mengaktifkan tombol terkait karena saya tidak dapat meneruskannya ke pengendali acara.

Ini html saya

  <mat-button-toggle-group [multiple]="schema.multi">
        <mat-button-toggle *ngFor="let label of schema.labels"
                           (click)="toggleAnnotation(label, localButton)"
                           [value]="label.name"
                           #localButton
                           [style.background-color]="localButton.checked == true ? label.backgroundColor : 'ghostwhite'">
          {{label.name}} ({{label.shortcut}})
        </mat-button-toggle>
  </mat-button-toggle-group>
</div>

Dan naskah terkait:

import {Component, EventEmitter, HostListener, Input, OnChanges, Output, SimpleChanges} from '@angular/core';
import {Label} from '../sequence/models/label';
import {TagAssignment} from '../../../models/tag-assignment';
import {MatButtonToggle, MatButtonToggleGroup} from "@angular/material/button-toggle";


export class CategoricalTaggerSchema {
  multi: boolean; // can the user select multiple tags at once
  prompt: string; // message to display before showing the tagger document
  labels: Label[]; // categories to select from
}

@Component({
  selector: 'app-categorical',
  templateUrl: './categorical-tagger.component.html',
  styleUrls: ['./categorical-tagger.component.css']
})
export class CategoricalTaggerComponent implements OnChanges {
  @Input() config: TagAssignment = new TagAssignment(); // default to some value
  @Output() valueChange = new EventEmitter<string>();
  @Output() validChange = new EventEmitter<boolean>();
  @Input() disabled = false;

  schema: CategoricalTaggerSchema = {multi: false, prompt: '', labels: []};
  annotations = new Set<string>(); // much simpler then sequence tagging, just a list of named labels

  constructor() {}

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.hasOwnProperty('config')) {
      this.schema = JSON.parse(this.config.tag_schema);
    }
  }

  toggleAnnotation(label: Label, localButton) {
    if (!this.disabled) {
      if (this.annotations.has(label.name)) {
        this.annotations.delete(label.name);
        localButton.checked = false;
      } else { // creating new annotation
        if (!this.schema.multi) { // only one annotation allowed
          this.annotations.clear();

        }
        this.annotations.add(label.name);
      }
    }
    this.emitChanges();
    console.log(this.annotations);
  }

  emitChanges() {
    this.valueChange.emit(this.getValue());
    this.validChange.emit(this.isValid());
  }

  @HostListener('document:keypress', ['$event'])
  handleKeyboardEvent(event: KeyboardEvent) {
    // detect keypress for shortcut
    for (const label of this.schema.labels) {
      if (label.shortcut === event.key) {
        this.toggleAnnotation(label, null);
        break;
      }
    }
  }

  getValue(): string {
    return JSON.stringify(Array.from(this.annotations));
  }

  isValid(): boolean {
    return (this.annotations.size > 0);
  }

  reset(): void {
    this.annotations.clear();
  }
}

Satu-satunya hal yang dapat saya pikirkan adalah entah bagaimana menjalankan fungsi dari HTML pada pemuatan komponen yang menambahkan semua tombol sakelar ke array atau peta yang dapat diakses oleh TS, dan mencarinya dengan pintasan ketika saya membutuhkannya, tetapi ini sepertinya seperti solusi peretasan.

EDIT: Saya sudah mencoba menggunakan ViewChild, tetapi karena saya tidak dapat menginisialisasi id secara dinamis (viewChild sudut untuk elemen dinamis di dalam ngFor) saya tidak dapat mengakses komponen untuk mengubah statusnya yang dicentang.