Arrays 在数组中添加新值后，*ngFor表中以前的输入值为空

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

其中，在推送表更新之后，我在该数组中推送另一个空白值，并且在表中添加了新行，但前面的行输入变为空白。下面给出了屏幕截图

用于ngfor的阵列：

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

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>

添加新行之前的第一项：

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

在表中添加新行后：

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

---

根据您对我的评论的回答，您正在使用表单，因此您要做的是使用

ngModel

和

name

属性注册表单控件。由于您对所有行使用相同的

名称

，angular认为行中的所有列都是相同的表单控件，请参见此处的模板：您可以看到表单中只有一个值，无论有多少行

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

做：

---

其中，

i

是

*ngFor

中项目的索引。对所有列字段执行相同的操作。这里有一个来证明这一点。

这是一个表单吗？还有太多的代码，请提供一个。请删除所有不必要的。在问题中只显示一个属性就足够了，而不是所有属性。问题是关于表的，所以我必须包括整个表，但您可以有一个带有单个字段的表，而不是显示所有字段。如果表中有1个或100个字段，则问题相同。您的问题是行重置为空，但字段的数量无关紧要。当代码很小的时候，使用它就容易多了。我知道我不会筛选所有的代码并试图找出问题所在。帮助我们帮助您。我已减少到只有一个字段。请检查“新建编辑”