填写所有输入字段

时间:2018-09-10 13:51:18

标签: html angular

有一个标记:

<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>

最后一列如下:

enter image description here

问题如下:填充一个TextBox时,该列中的所有TextBoxes都被填充。

enter image description here

如何解决此问题?试图为文本字段赋予唯一的名称,并在form中插入该单元格,但所有这些均无效。

4 个答案:

答案 0 :(得分:3)

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

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

i*ngFor的索引

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

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

答案 1 :(得分:2)

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

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

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

答案 2 :(得分:2)

人们给您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"

答案 3 :(得分:1)

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

的索引填充的ID

尝试一下:

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

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