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

18 浏览
0 Comments

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

我有以下的地图

.dart

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

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

.html

我的问题如下:

  1. 每个复选框的标签应该是\"symptom[\'name\']\" - 我该如何在*ngFor中集成它?
  2. 如何确定特定的复选框已被选择?

编辑1

我现在正在使用以下方法查看复选框和标签:

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

\"enter

谢谢

Teddy

admin 更改状态以发布 2023年5月24日
0

1 答案

0 Comments

你的ngFor语法不正确。表达式应该是"#binding of list"，而不是in。请参见Mark的答案以获得更详细的解释。

此外，如果您想要重复标签和复选框，则需要将模板移动到DOM树的更高级别。为此，请使用扩展的ngFor语法。

最后，使用ngModel而不是绑定到checked——存在属性必须是checked="checked"，这不是绑定到Boolean的理想选择。

@Component({
  selector: 'my-app',
  directives: [NgFor],
  template: `{{title}} 
  

        
  

  `
})

演示Plnker

0