* ngFor с `{}` пустые объекты ссылаются на одиночную ссылку, когда коллекция определена на шаблоне

Question

У меня есть требование, когда я показываю серию текстовых полей с начальными пустыми данными. Поэтому для того же я создал один массив с 3 пустым [{},{},{}]. Тогда я сделал петлю над каждым элементом и отображается на просмотр с помощью *ngFor

<div *ngFor="let item of [{},{},{}]"> 
    {{item.Id}} 
    <input type="text" [(ngModel)]="item.Id"> 
</div> 

Над делают мои все текстовые поля правильно, но когда я пытаюсь изменить любой из входного элемента, все текстовые поля относится к той же ссылке.

Я хочу изменить конкретный объект item объект Id объект. Я знаю, что могу перемещать объявление массива внутри моего класса компонентов (хотя это решает мою проблему), мне любопытно узнать, что случилось с объявлением массива в шаблоне?

Problem Plunker

Answer 1

Вы не заявили о item.id собственности.

Следующий код будет работать:

<div *ngFor="let item of [{id: ''},{id: ''},{id: ''}]"> 
    {{item.id}} 
    <input type="text" [(ngModel)]="item.id"> 
</div> 

Answer 2

экземпляры объектов, созданных в шаблоне с использованием идентичных объекта буквального синтаксиса являются повторно AFAIK, поэтому 3x один и тот же объект.

<div *ngFor="let item of [{},{},{}]"> 

<div *ngFor="let item of items"> 

с

items:[{},{},{}]; 

должен работать, потому что в ТС будет создано 3 новых объектов.

Plunker example