Angular 5 [ngForOf] показывает только последнюю запись в цикле

Question

Я могу сделать цикл, но я не понимаю, почему он показывает только значение последней записи

invoice-list.html

<ng-template ngFor let-i [ngForOf]="invoiceService.selectedInvoice.purchases"> 
{{i.product.name | json}}   
   <input type="text" name="name" class="form-control" #pname="ngModel" [(ngModel)]="i.product.name" readonly>
</ng-template>

вот пример StackBlitz (login => user:user@user.com | pass: user123)

как перейти к этому представлению?

Answer 1

Поскольку вы используете двустороннее связывание NgModel, которое связывает входящее значение с одной и той же переменной - i.product.name. Здесь нет особого смысла использовать ngModel. Вы экспортируете свою форму с #invoiceFrom='NgForm, так что вы можете выполнить все проверки там. Просто передайте значение:

<input type="text" name="name" class="form-control [value]="i.product.name" readonly>