angular - 在 Angular 中设置 @ViewChildren 的属性

Question

在我的 html 模板中，我有多个由 *ngFor 生成的元素。

我成功地订阅了 ngAfterViewInit 生命周期钩子中的值更改。

但是，我无法通过代码设置.checked 属性。

有人发现我的错误吗？非常感谢任何帮助！

export class GroupsExpPanelComponent implements AfterViewInit {

  @ViewChildren('confirm') confirm: QueryList < MatButtonToggle > ;
  confirmToggles: MatButtonToggle[] = [];

  ngAfterViewInit() {
    this.confirm.changes
      .subscribe(
        res => {
          this.confirmToggles = res.toArray();
        }
      );
  }


<mat-button-toggle #confirm>Title</mat-button-toggle>

我本来希望能够像这样设置我的属性

this.confirmToggles[index].checked = true;

Answer 1

this.confirmToggles[index] 是对原生元素的引用，而不是原生元素本身，也不是 MatButtonToggle 类的实例。

(<HTMLInputElement> this.confirmToggles[index].nativeElement) 可能是你想要的，假设原生元素确实是某种按钮。当然，使用原生元素并不是真正理想的 Angular 做事方式。

如果你想取回你的 MatButtonToggle 类的实例，你需要使用@ViewChildren(MatButtonToggle)。