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

使用ngfor angular创建复选框列表

angular-ngfor angular-template checkbox angular

0

sander · 技术社区 · 8 年前

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

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

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

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

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

3 回复 | 直到 8 年前

1

0

Suren Srapyan 8 年前

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

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

2

1

Jota.Toledo 8 年前

这个 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元素被剥离。

3

1

Akj 8 年前

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

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