Question

我正在Angular2中构建一个表单，其中包含一个对象数组的字段。到目前为止，我已经构建了每行删除行按钮和添加行按钮的表。它们使用JavaScript push()和slice()方法。

但是有一个很大的错误：添加新行时，将删除先前行的内容。也就是说，行的内容被删除，而不是行本身。有什么想法吗？

组件代码：

public addRow(): void {
    this.table.push({});
}

public deleteRow(row: object): void {
    this.table.splice(this.table.indexOf(row), 1);
}

HTML模板

<form #TimesheetForm="ngForm" (ngSubmit)="saveTimesheet()">
    <div class="row">
        <div class="col text-right">
            <button type="button" class="btn" (click)="addRow()"><i class="fa fa-plus-square" aria-hidden="true"></i> Add Row</button>
        </div>
    </div>
    <table class="table">
        <thead>
            <td class="table__header">Date</td>
            <td class="table__header">Time</td>
            <td class="table__header">Actions</td>
        </thead>
        <tbody>
            <tr *ngFor="let row of table">
                <td class="table__item">
                    <input class="input" [(ngModel)]="row.date" name="date">
                </td>
                <td class="table__item">
                    <input class="input" [(ngModel)]="row.time" name="time">
                </td>
                <td class="table__item">
                    <button type="button" class="btn btn--negative" (click)="deleteRow(row)"><i class="fa fa-times" aria-hidden="true"></i> Delete</button>
                </td>
            </tr>
            <tr *ngIf="school.rows.length == 0">
                <td colspan="3">No rows exist yet. Click Add Row to start logging your timesheet.</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="row">
    <div class="col">
        <button class="btn btn--positive" type="submit"><i aria-hidden="true" class="fa fa-check"></i> Save</button>
    </div>


    <div class="col text-right">
            <button class="btn btn--negative"><i aria-hidden="true" class="fa fa-times"></i> Cancel</button>
        </div>
    </div>
</form>

Answer 1

使用模板驱动表单时，我们需要记住name属性需要是唯一的，否则字段将被评估为相同的字段。所以你的表单现在做的是，在添加新行时不添加新的表单控件，而是操纵同一个表单字段。如果您在模板中添加<pre>{{TimesheetForm.value | json}}</pre>之类的内容，则可以看到，尽管推送了新行，但只有一个表单控件名称date和一个名为time的表单控件。 / p>

所以我们需要做的是提供一个唯一的名称，我们可以通过使用table数组中项目的索引来实现。请执行以下操作：

<tr *ngFor="let row of table; let i = index">
   <td>
      <input [(ngModel)]="row.date" name="date{{i}}">
   </td>
   <td>
      <input [(ngModel)]="row.time" name="time{{i}}">
   </td>
   <!-- more code here -->
</tr>

Angular2 Javascript Push - 将项添加到数组

1 个答案: