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

2023年4月26日 241次阅读

我有以下地图

.镖

List<Map<String, dynamic>> symptoms = [
  {'name': 'Dizziness', 'checked': false},
  {'name': 'Fainting', 'checked': false}
];

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

html的

<div class = "form-group">
        <div class = "form-control"
             ngControl = "symptoms">
          <label for="symptom" >Symptoms</label>
            <input
              type = "checkbox"
              *ngFor = "#symptom in symptoms"
              [checked]="symptom['checked']"/>

        </div>
  </div>

我的问题如下：

  1. The label for each checkbox should be “symptom[‘name’] – how do I integrate this in the *ngFor?
  2. How can I determine that a specific checkbox was selected?

编辑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>

但是,标签似乎在一行而复选框在另一行.我正在使用bootstrap.min.css并想知道这是否是主要原因.复选框也大于预期,如下所示：

《angular – 如何使用* ngFor和地图列表生成复选框》

干杯,谢谢
泰迪熊

最佳答案 您的ngFor语法不正确.表达式应该是“#binding of list”,而不是.请参阅
Mark’s answer以获得更详细的解释.

此外,如果要重复标签和复选框,则需要将模板移到DOM树的上方.为此,请使用扩展的ngFor语法.

最后,使用ngModel而不是绑定到checked – 属性的存在必须是checked=”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>
  `
})

Demo Plnker

点赞