在Angular 2中提交后如何清除表格？

当我们在Angular 2中使用表格时，我们经常需要在提交表单后清除表格。这可以通过以下步骤来实现。

步骤

1. 在组件中定义表格数据和提交表单的函数

export class MyComponent {
  tableData = [
    {id: 1, name: 'John'},
    {id: 2, name: 'Jane'}
  ];
  
  submitForm() {
    // 代码实现表单的提交逻辑
  }
}

2. 在组件的HTML中，使用ngFor指令循环遍历表格数据，并在页面中呈现出来

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of tableData">
      <td>{{ row.id }}</td>
      <td>{{ row.name }}</td>
    </tr>
  </tbody>
</table>

<button (click)="submitForm()">Submit</button>

3. 在表单提交函数中重置表格数据

submitForm() {
  // 代码实现表单的提交逻辑

  // 重置表格数据
  this.tableData = [];
}

4. 在HTML中使用ngIf指令来判断表格数据是否为空，如果为空则不显示表格

<table *ngIf="tableData.length > 0">
  <!-- 表格代码 -->
</table>

结论

在Angular 2中清除表格非常简单，只需将表格数据重置为空数组即可。同时，通过ngIf指令可以在表格数据为空时不显示表格，让页面更加美观。