angular - 使用 ngFor Angular 创建复选框列表

Question

我有一个结构如下的对象列表：

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

我正在尝试从这个列表中创建一个带有角度的复选框列表，如下所示：

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

复选框本身确实会显示，但我无法获得要与每个复选框一起显示的对象名称。我究竟做错了什么？

Answer 1

您可以将复选框与 *ngFor 一起使用，如下所示。

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

Answer 2

该object变量仅存在于 的上下文中ngForOf，在您的情况下，这是<input>元素的上下文。

您可以包装元素的<input>内部，并将其绑定到最后。像这样：ng-containerngForOf

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

使用这种方法，生成的 HTML 是相同的，因为 ng-container 元素被剥离了。

Answer 3

我必须确保标签中的for属性与输入 id 相同：

在此处查看片段

 <div class="m-checkbox-list">
   <label *ngFor="let detectionSource of detectionSources" for="detectionSource_{{detectionSource.id}}" class="m-checkbox">
    <input id="detectionSource_{{detectionSource.id}}" type="checkbox" name="detectionSource_{{detectionSource.name}}" [(ngModel)]="detectionSource.isSelected">
                                    {{detectionSource.name}}
    <span></span>
   </label>
 </div>

Answer 4

您需要放置*ngFor一个容器以使范围变量在其中可见。这里我用过div，但你可以用任何你想要的。

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