Angular2：使用 ngFor 输入控制表单标签内的损失值

Question

我在 Angular2 中开发了一个使用 form 标签的页面，并且在 table 标签中使用 ngFor 渲染了输入控件。

\n\n

我创建了模型（DataModal）来表示表的每一行。我创建了模型列表（DataModalList），并通过单击按钮（addNewRow）不断将每个模型添加到其中

\n\n

我面临添加新行时删除选定输入值的问题。\n当我删除表单标签时一切正常\n我需要表单标签来执行验证。

\n\n

请找到下面的代码：

\n\n

模型：

\n\n

import {DropDownModel} from \'../models/dropDownModel\';\xc2\xa0\nexport class DataModal {\n  dropdown: DropDownModel[];\n  selectedValue: string;\n  constructor() {\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0  \xc2\xa0\xc2\xa0\xc2\xa0 \n          this.selectedValue = "0";\xc2\xa0\xc2\xa0\n      }\n }\n

\n\n

成分：

\n\n

addNewRow() {\xc2\xa0\n    let dataModal = new DataModal();\n    dataModal.dropdown = response; //values are coming from api\n    this.DataModalList.push(dataModal);\n}\n

\n\n

网页：

\n\n

<form novalidate #form="ngForm" (ngSubmit)="submitEditForm(form.valid)">\n    <table>\n        <tr *ngFor="let item of DataModalList;let i= index ">\n            <td class="col-md-3">\n                <div>\n                    <label class="control-label" for="BoxID"> Box Number </label>\n                    <select class="form-control" #BoxID="ngModel"  name="BoxID" [(ngModel)]="item.selectedValue">\n                             <option  value="0" disabled > -- select -- </option>\n                             <option *ngFor="let element of item.dropdown"                                                           \n                              [value]="element.value" >{{element.label}}</option>\n                         </select>\n                </div>\n            </td>\n            <td class="col-md-3">\n                <div>\n                    <a title="Add" (click)="addNewRow()" class="btn blue btn-sm">\n                        <i class="fa fa-plus"></i>\n                    </a>\n                </div>\n            </td>\n        </tr>\n    </table></form>\n

\n

Answer 1

您的控件需要唯一的名称才能在 html 页面中正常工作。

因此，在name属性中也使用index-i。使用下面的代码：

<select class="form-control" #BoxID="ngModel" name="BoxID-{{i}}"
[(ngModel)]="item.selectedValue" [ngModelOptions]="{standalone: true}>
<option  value="0" disabled > -- select -- </option>
<option *ngFor="let element of item.dropdown"                                                           
    [value]="element.value" >{{element.label}}
</option>
</select>