填写所有输入字段

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

您需要使用角度模板为输入字段赋予唯一的名称

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

i是*ngFor的索引

但是我认为您遇到的主要问题是您需要绑定book.Count而不是仅绑定Count

在后一种情况下，您将有一个名为Count的变量，并将相同的变量绑定到所有输入字段。您需要将变量附加到书本身，因此它是唯一的。

Answer 2

您所有的输入都具有相同的[(ngModel)]="Count"和名称，因此，如果您更新其中一个，则所有输入都将被更新

如果您有一个count数组，则可以解决此问题。所以会像

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

Answer 3

人们给您HTML方式，我给您Angular方式：Running flutter packages pub upgrade failed with the following output: ERR: The current Dart SDK version is 2.1.0-dev.1.0.flutter-69fce633b7. Because tts requires SDK version >=1.8.0 <=2.0.0, version solving failed. 函数。

trackBy

这应该可以工作，但我从未测试过。

在任何情况下都应该起作用：

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

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

Answer 4

您输入的名称不能相同。 要解决此问题，您可以添加一个由循环 * ngFor

的索引填充的ID

尝试一下：

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

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