Angular 如何使用*ngFor和地图列表生成复选框

我有下面的地图

飞奔

列出症状=[
{'name'：'dizzy'，'checked'：false}，
{'name'：'晕倒'，'checked'：false}
];

我在html中的错误尝试如下所示

.html

症状

我的问题如下：

每个复选框的标签应为“症状['name']-如何将其集成到*ngFor中？”

如何确定已选中特定复选框

编辑1 我现在看到的复选框和标签如下所示：

  <div layout = "row"
       layout-align = "center"
       class = "form-group"
       *ngFor = "#s of symptoms">
    <label>{{s['name']}} </label>
    <input
        type = "checkbox"
        [checked] = "s['checked']"
        class = "form-control"/>
  </div>

{{s['name']}

但是，标签似乎在一行，复选框在另一行。我正在使用bootstrap.min.css，不知道这是否是主要原因。复选框也比预期的大，如下所示：

干杯，谢谢

---

Teddy

您的

ngFor

语法不正确。表达式应为“#bindingoflist”，而不是中的。有关更详细的解释，请参阅

此外，如果要重复标签和复选框，则需要将模板向上移动到DOM树的更高位置。为此，请使用扩展的

ngFor

语法

最后，使用

ngModel

而不是绑定到

checked

——属性的存在必须是，这不适合绑定到

布尔值

@Component({
  selector: 'my-app',
  directives: [NgFor],
  template: `{{title}} <br />
  <form>
  <div class = "form-group">
        <template ngFor #symptom [ngForOf]="symptoms">
        <div class = "form-control">
          <label for="symptom" >{{symptom.name}}</label>
            <input
              type = "checkbox"
              ngControl="symptom"
              [(ngModel)]="symptom['checked']" />
        </div>
        </template>
  </div>
  </form>
  `
})

@组件({
选择器：“我的应用程序”，
指令：[NgFor]，
模板：`{{title}}}

{{symptom.name}
`
})

非常感谢。使用“in”是因为将Dart中的表达式与Angular中的表达式混合在一起-我的错误。您的Plnker演示运行良好，但我想知道标签名称-{{symptom.name}-是否应该是{{symptom['name']}相反？它是唯一一个与Dart一起工作的。如何确定选中了哪个复选框？我不确定Dart是否会更改内容，因为我不知道Dart。但两者都应该工作：symptom.name或symptom['name']-两者都是等效的。要确定选中了哪个复选框，可以添加一个单击处理程序：（单击）=“onClick（symptom）”。请参阅演示。
  <div layout = "row"
       layout-align = "center"
       class = "form-group"
       *ngFor = "#s of symptoms">
    <label>{{s['name']}} </label>
    <input
        type = "checkbox"
        [checked] = "s['checked']"
        class = "form-control"/>
  </div>

@Component({
  selector: 'my-app',
  directives: [NgFor],
  template: `{{title}} <br />
  <form>
  <div class = "form-group">
        <template ngFor #symptom [ngForOf]="symptoms">
        <div class = "form-control">
          <label for="symptom" >{{symptom.name}}</label>
            <input
              type = "checkbox"
              ngControl="symptom"
              [(ngModel)]="symptom['checked']" />
        </div>
        </template>
  </div>
  </form>
  `
})