在 Angular 中设置 @ViewChildren 的属性答案

【问题标题】：Setting properties on @ViewChildren in Angular在 Angular 中设置 @ViewChildren 的属性
【发布时间】：2018-02-27 02:29:18
【问题描述】：

在我的 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;

【问题讨论】：

你为什么不使用像<mat-button-toggle [checked="foo">这样的视图绑定？这更像是在 Angular 2 及更高版本中完成的事情。
我会尝试并重构一些代码。感谢您的建议，会回来报告。
谢谢 Günther，我想昨天太晚了。我做了一些重构，现在像你建议的那样使用属性绑定。在我的具体情况下为我工作！
如果用例允许的话会更好。很高兴听到一些睡眠解决了它：D

标签： angular viewchild

【解决方案1】：

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

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

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

【讨论】：

@ViewChildren(MatButtonToggle) 会给我组件中的所有实例，对吗？如果我只想查询那些在模板中被标记为#confirm 的实例怎么办？
也许 @ViewChildren('confirm', {read: MatButtonToggle}) 可以解决问题？我似乎找不到关于 read 参数如何工作的好的文档，但它应该可以让您对返回的对象类型进行一些控制。