在数组中添加新值后 *ngFor Table 中输入的先前值变为空白

Question

我正在创建一个项目，其中我有 table 个输入，用户可以在其中输入名称、描述、价格、数量和一个复选框字段。因为我已经将循环应用到行并使用一个空白值初始化数组以显示一个空白行以供用户填充，然后用户可以单击第一列中提供的按钮。

在推送 table 更新后，我在该数组中推送另一个空白值，并且还在 table 中添加了新行，但之前的行输入得到下面给出的 blank.screenshot。

用于 ngfor 的数组：

// items table fields
invoiceitems = [
    {
        id: this.idcount,
        name: "",
        description: "",
        price: "",
        qty: "",
        amount: "",
        istax: "",
        selectedItem: {}
    }
];

Table 在 html:

   <div class="table-responsive">
        <table class="table table-bordered">
            <thead class="table-head table-head">
                <tr class="text-white">
                    <th class="invoice-detail-margin">#</th>
                    <th class="invoice-detail-summary">Description</th>
                    <th class="invoice-detail-rate">Rate</th>
                    <th class="invoice-detail-quantity">Qty</th>
                    <th class="invoice-detail-total">Amount</th>
                    <th class="invoice-detail-tax">Tax</th>
                </tr>
            </thead>
            <tbody>

                <tr class="item-row item-row-1 with-tax"
                    *ngFor="let item of invoiceitems; let i = index">
                    <td class="item-row-actions">
                        {{item | json}}
                        <div class="confirm-delete-button">
                            <button type="button" title="Remove Item" (click)="removeitem(i)"
                                style="border-color: rgb(51, 51, 51); color: rgb(51, 51, 51);"
                                class="btn btn-remove table-head plus-minus-btn">
                                <span class="plus-minus-icon-span">
                                    <i class="fas fa-minus"></i>
                                </span>
                            </button>
                        </div>
                    </td>
                    <td data-label="Item #1" class="item-row-summary">
                        <span class="item-row-name">
                            <div class="item-suggest">
                                <div role="combobox" aria-haspopup="listbox"
                                    aria-owns="react-autowhatever-1" aria-expanded="false"
                                    class="react-autosuggest__container">
                                    <input type="text" autocomplete="off" [(ngModel)]="item.name"
                                        aria-autocomplete="list"
                                        aria-controls="react-autowhatever-1" name="item-name"
                                        class="react-autosuggest__input invoice-input"
                                        id="invoice-item-code" placeholder="Item Description">
                                    <!-- 
                                    <ng-select class="custom"
                                        (change)="itemselected(item.selectedItem, i)"
                                        [items]="Items" bindLabel="name" autofocus name="item-name"
                                        [(ngModel)]="item.selectedItem" required>
                                    </ng-select> -->

                                    <div id="react-autowhatever-1" role="listbox"
                                        class="react-autosuggest__suggestions-container">
                                    </div>
                                </div>
                            </div>
                        </span>
                        <span class="item-row-description">
                            <textarea style="min-height: 80px; height: 69px;"
                                [(ngModel)]="item.description" name="item-descrition"
                                class="item-description-input invoice-input"
                                placeholder="Additional details"></textarea>
                        </span>
                    </td>
            </tbody>
        </table>
    </div>

这是我创建新行的方式：

    this.invoiceitems.push({
        id: this.idcount + 1,
        name: "",
        description: "",
        price: "",
        qty: "",
        amount: "",
        istax: "",
        selectedItem: {}
    });

添加新行之前的第一个条目：

screenshot of first entry

在 table 中添加新行后：

after new row

Answer 1

根据您对我评论的回答，您正在使用表单，因此您正在做的是使用 ngModel 和 name 属性注册表单控件。由于您对所有行使用相同的 name，angular 认为行中的所有列都是相同的表单控件，请参阅此处的模板：STACKBLITZ 您可以看到，无论您有多少行，表格中都只有一个值。

您可以通过为每个表单控件指定一个唯一名称（或删除表单标签）来解决此问题。可以通过使用索引的帮助来为 name 属性赋予一个唯一的名称，所以不要这样：

<input [(ngModel)]="item.name" name="item-name" placeholder="Item Description">

做：

<input [(ngModel)]="item.name" [name]="'item' + i" placeholder="Item Description">

其中 i 是 *ngFor 中项目的索引。对所有列字段执行相同操作。这是一个 STACKBLITZ 证明。

在数组中添加新值后 *ngFor Table 中输入的先前值变为空白

After Adding new value in array previous values of inputs in *ngFor Table get blank

arrays

angular

html-table

ngfor

angular8