Angular 5 显示基于数组选中的复选框

Question

我有一组 Angular 形式的动态复选框:

<div class="form-check" *ngFor="let topic of topics">
    <input class="form-check-input" (change)="onChange(f)" #f type="checkbox" [value]="topic.name" name="topicgroup">
    <label class="form-check-label" style="font-weight: normal">
        {{topic.name}}
    </label>
</div>

在我的编辑组件中，如何将它们设置为选中状态？

我有一个包含所有选项的数组，其中一个选项被选中:

Topics: string[] = ['Topic1', 'Topic2', 'Topic3', 'Topic4', 'Topic5']; 
selectedTopics: string[] = ['Topic1', 'Topic2']; 

我如何在我的 html 页面上反射(reflect)出来？

更新:这是我的 onChange 函数:

onChange(f) {
if (this.selectedTopics.indexOf(f.value) == -1) {
  this.selectedTopics.push(f.value);
} else {
  this.selectedTopics.splice(this.selectedTopics.indexOf(f.value), 1);
}

Answer 1

首先，您正在使用 topic.name根据您的数组，它将只是主题。

二、添加[checked]属性将它们标记为选中或未选中，如下所示。

<div class="form-check" *ngFor="let topic of topics">
    <input class="form-check-input" [checked]="topic in selectedTopics" (change)="onChange(topic)" #f type="checkbox" [value]="topic" name="topicgroup">
    <label class="form-check-label" style="font-weight: normal">
        {{topic}}
    </label>
</div> 

第三个您的 function onChange(topic)将如下

onChange(topic: string) {
  let index = this.selectedTopics.indexOf(topic);
  if (index == -1) {
    this.selectedTopics.push(value);
  } else {
    this.selectedTopics.splice(index, 1);
  }
}

更新
替换 [checked]="topic in selectedTopics"与 [checked] = isSelected(topic)
并在您的 Controller 中添加功能

isSelected(topic){
    return selectedTopics.indexOf(topic) >= 0;
}