Создание списка флажков с помощью ngFor Angular

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>