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页面上反映出来？

更新：这是我的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)

并在你的控制器中添加功能

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

Answer 2

如this stackblitz所示，您可以使用[ngModel]和(ngModelChange)将数据绑定到输入元素：

<div class="form-check" *ngFor="let topic of topics; let i=index">
  <input [ngModel]="isSelected(topic)" (ngModelChange)="onChange(topic, $event)" name="topicgroup_{{i}}" type="checkbox" class="form-check-input">
  <label class="form-check-label" style="font-weight: normal">
    {{topic}}
  </label>
</div>

使用组件类中定义的方法isSelected和onChange：

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

isSelected(value: string): boolean {
  return this.selectedTopics.indexOf(value) >= 0;
}

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

您在问题中提到这些控件将包含在form中。因此，每个输入元素必须具有不同的名称，这可以通过索引变量name="topicgroup_{{i}}"来实现。

Answer 3

您需要将数据结构更改为具有值和已检查属性的对象数组

selectedTopics: any[] = [ {'value':'Topic1','checked':false}, {'value':'Topic2','checked':true}];

每当选中/取消选中复选框，您都可以更新checked属性以获取值。

Answer 4

Angular varible区分大小写，请查看此工作示例：https://stackblitz.com/edit/angular-uwekdb?file=app%2Fapp.component.ts

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

4 个答案: