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可编辑。
我还需要验证，修改将触发Web api调用。
实现该目标的最佳方法是什么？

Answer 1

您可以使用ReactiveForm with a formArray并将mydatepicker library用作日期选择器。文档描述得很好，但是如果您有任何问题，我会尽快回答！这也是一个很好的教程：https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/

Answer 2

您可以像这样在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

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

2 个答案: