Question

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

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

我正在尝试创建一个复选框列表，其角度不在此列表之内，如下所示：

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

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

Answer 1

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

您可以将<input>包裹在ng-container元素内，并将ngForOf绑定到最后一个元素。像这样：

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

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

Answer 2

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

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

Answer 3

您需要将*ngFor放在容器上，以使范围变量在其中可见。在这里，我使用了div，但是您可以使用任何您想要的东西。

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

Answer 4

我必须确保标签中的 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>

使用ngFor Angular创建复选框列表

4 个答案: