将 id 数组绑定到 Angular4 中动态生成的复选框答案

【问题标题】：Binding array of ids to dynamically generated checkboxes in Angular4将 id 数组绑定到 Angular4 中动态生成的复选框
【发布时间】：2017-09-24 10:48:14
【问题描述】：

晚上好开发人员，所以我在将动态生成的复选框绑定到数组中的值时遇到了这个问题。基本上我的 users.template.html 文件中有以下内容：

<div *ngFor="let r of roles" class="checkbox">
   <label for="">
      <input type="checkbox" id="{{ r.name }}" (change)="onRoleChange(r.name, $event)" [checked]="userRoles.includes(r.name)"> {{ r.name }}
   </label>
</div>

基本上，它的作用是根据动态生成的给定复选框更新用户的角色。现在（更改）效果很好，但 [checked] 抛出错误，说明如下：

无法读取未定义的属性“包含”

我不知道为什么，因为无论我在哪里看，它都指向我对这种类型的动态内容使用这种绑定。因此，如果您有任何指示，那将是很棒的。提前感谢大家的任何建议。

【问题讨论】：

似乎userRoles 没有在任何地方定义？它来自哪里？
我在开始时将其定义为 userRoles: any[]; 然后在 ngOnInit() 上初始化其数据以使其填充。
你能展示一下它的内容样本吗？
[ "Admin", "CanGenerateTransactions", "CanSeeTransactions" ] 例如，这是我的用户角色，我做了一个 console.log(this.userRoles) 检查它不为空。

标签： angular typescript checkbox

【解决方案1】：

根据我的理解，您不能直接在模板中调用特定 type 的对象的继承方法。你可以调用一个组件方法来代替你进行计算。

<input type="checkbox" id="{{ r.name }}" (change)="onRoleChange(r.name, $event)" [checked]="presentInUserRoles(r.name)">

组件

presentInUserRoles(role: string): boolean {
 return this.userRoles.includes(role);
}

【讨论】：

这行得通，不知道为什么它会限制它，它曾经像以前一样工作。
如果你能举例说明它以前是如何工作的，也许我可以试着指出其中的区别。您当然可以在“模板内”引用对象的特定属性，但不能调用属于其原型的继承方法。