Заполнение всех полей ввода

Question

Существует разметка:

<div class="scroll">
<table class="table table-striped">
<thead>
    <tr>
        <th>Image</th>
        <th>Name</th>
        <th>Author</th>
        <th>Year</th>
        <th>ISBN</th>
        <th>Price</th>
        <th>Count</th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let book of bookService.bookList">
        <td><img src="../../{{book.ImagePath}}" width="100" height="150"></td>
        <td>{{book.Name}}</td>
        <td>{{book.Author}}</td>
        <td>{{book.Year}}</td>
        <td>{{book.ISBN}}</td>
        <td>{{book.Price}}</td>
        <td>{{book.Count}}</td>
        <td>

            <input type="text" name="Count" [(ngModel)]="Count">
            <button class="btn btn-block btn-outline-success" (click)="onAdd(book, Count)"><i class="fa fa-plus"></i></button>

        </td>
    </tr>
</tbody>

Последний столбец выглядит так:

Проблема заключается в следующем: при заполнении одного TextBox заполняются все TextBoxes в столбце.

Как решитьЭта проблема?Пытался дать уникальные имена текстовым полям и засунуть эту ячейку в form, но все равно не сработало.

Answer 1

Люди дают вам способ HTML, я даю вам угловой способ: trackBy функции.

*ngFor="let book of bookService.bookList; trackBy: book.Name"

Это должно работать, но я никогда не проверял это.

В любом случае должно работать:

*ngFor="let book of bookService.bookList; trackBy: customTB"

customTB(item, index) {
  return `${index}-${item.Name}`;
}

Answer 2

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

<input [name]="'count' + i" >

Где i - индекс из *ngFor

Но я думаю, что основная проблема у вас заключается в том, что вам нужно связать book.Count вместо Count

В последнем случае у вас будет одна переменная с именем Count, и вы свяжете одну и ту же переменную со всеми полями ввода. Вам необходимо прикрепить переменную к самой книге, чтобы она была уникальной.

Answer 3

Вы не можете использовать одно и то же имя для своих входов. Чтобы это исправить, вы можете добавить идентификатор, заполненный индексом цикла * ngFor

Попробуйте это:

<tr *ngFor="let book of bookService.bookList; let i = index">

<input type="text" name="Count_${i}" [(ngModel)]="count">

Answer 4

Все ваши входы имеют одинаковое [(ngModel)]="Count" и одинаковое имя, поэтому, если вы обновите один, все они будут обновлены

Вы можете это исправить, если вместо этого у вас есть массив count. Так что это будет что-то вроде

<tr *ngFor="let book of bookService.bookList; let i = index">
...
<input type="text" [name]="'count' + i" [(ngModel)]="count[i]">