代码之家 › 专栏 › 技术社区 › sander

使用ngfor angular创建复选框列表

angular-ngfor angular-template checkbox angular

sander · 技术社区 · 6 年前

我有一个对象列表,其结构如下:

[{item},{item},{item}]

我正试图创建一个复选框列表,其中的角度超出此列表,如下所示:

<form>
     <input *ngFor="let object of objects" type="checkbox"> {{object.name}}
</form>

复选框本身确实会出现,但我无法让每个复选框都显示对象的名称。我做错什么了?

3 回复 | 直到 6 年前

Suren Srapyan 6 年前

你需要把 *ngFor 使范围变量在容器中可见。这里我用过 div ,但你可以使用任何你想要的东西。

<form>
   <div *ngFor="let object of objects">
      <input type="checkbox"> {{object.name}}
   <div>
</form>

Jota.Toledo 6 年前

这个 object 变量仅存在于 ngForOf ,在您的情况下,这是 <input> 元素。

你可以把 <输入> 在一个 ng-container 元素,并绑定 NGFOROF公司 到最后。这样地:

<form>
   <ng-container *ngFor="let object of objects">
      <input type="checkbox"> {{object.name}}
   <ng-container>
</form>

使用这种方法,生成的html是相同的,因为ng container元素被剥离。

Akj 6 年前

您可以对*ngfor使用复选框,如下所示。

<form>
   <div *ngFor="let object of objects">
      <input type="checkbox" [checked]="object.checked"> {{object.name}}
   <div>
</form>

推荐文章

Mickey Vershbow · 无法获取复选框的“checked”属性

2 年前

XAZG ÐÐµÐ¸Ð·Ð²ÐµÑÑÐ½ÑÐ¹ · 如何在for js之后重置字符串变量

2 年前

SãOãNã JãOãã · Google sheets复选标记条件格式化

2 年前

Ranjith Raina · 在jquery中,可以将所有复选框值转换为逗号分隔的字符串

2 年前

Alex · 引导对齐表单开关左侧的标签

2 年前

Khilen Maniyar · 角度2:带有复选框的阵列工作不正常

6 年前

Yash Saraiya · jQuery datatable:在每个分页上启用几个文本框

6 年前

Kais · 带有输入复选框的表格选中/取消选中

6 年前

Silu K · 单击复选框后,如何将之前的所有复选框设置为在angular 4中选中

6 年前

yuggmeister · 如何使自定义复选框可访问?

6 年前