angular - Angular 6中的内联可编辑对象列表

Question

我有一个清单Person

class Person {
  name: string;
  birthdate: Date;
}

我成功地显示了这个列表，如下所示：

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Birthdate</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let person of persons">
            <td>{{ person.name }}</td>
            <td>{{ person.birthdate }}</td>
        </tr>
    </tbody>
</table>

现在我想使该字段name可内联birthdate编辑，并使用 datepicker 弹出窗口使该字段可编辑。
我还需要验证，修改将触发 web api 调用。
实现该目标的最佳方法是什么？

标签： angular

Answer 1

您可以像这样在 td 中添加文本输入或日期选择器

在 html 文件中

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Birthdate</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let person of persons">
            <td><input type="text" (input)="onValueChange(person.name)" [(ngModel)]="person.name"/></td>
            <td><input type="date" [(ngModel)]="person.birthdate"/></td>
        </tr>
    </tbody>
</table>

ts

onValueChange(value:any){
  //this api call or whatever you need to do on value change
}

或者您可以使用其他基于角度的组件，例如primeng或ag-grid