Angular 2 添加/删除行到表格

在前端开发中，表格是一个常见的组件。在 Angular 2 中，我们可以使用 ngFor 指令来循环渲染表格。但是，当我们需要添加或删除表格中的行时，该怎么办呢？本文将介绍如何使用 Angular 2 添加/删除行到表格，并提供示例代码。

添加行

要添加行到表格中，我们需要做以下几个步骤：

1. 在组件中定义表格数据。

在组件中定义一个数组，用于存储表格中的数据。例如：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let person of people">
          <td>{{ person.name }}</td>
          <td>{{ person.age }}</td>
        </tr>
      </tbody>
    </table>

    <button (click)="addPerson()">Add Person</button>
  `
})
export class AppComponent {
  people = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Charlie', age: 35 }
  ];

  addPerson() {
    this.people.push({ name: '', age: null });
  }
}

在这个例子中，我们定义了一个 people 数组，用于存储表格中的数据。在 addPerson 方法中，我们向 people 数组中添加一个空对象，用于渲染新的一行。

1. 在模板中使用 ngFor 指令渲染表格。

在模板中使用 ngFor 指令循环渲染表格中的数据。例如：

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let person of people">
      <td>{{ person.name }}</td>
      <td>{{ person.age }}</td>
    </tr>
  </tbody>
</table>

在这个例子中，我们使用 ngFor 指令循环渲染表格中的数据。每个 person 对象都包含一个 name 和 age 属性，用于渲染表格中的一行。

1. 在模板中添加一个按钮，用于添加新的一行。

在模板中添加一个按钮，用于触发 addPerson 方法，添加新的一行。例如：

<button (click)="addPerson()">Add Person</button>

在这个例子中，我们在模板中添加了一个按钮，用于触发 addPerson 方法，向表格中添加新的一行。

删除行

要删除表格中的行，我们需要做以下几个步骤：

1. 在组件中定义删除行的方法。

在组件中定义一个 removePerson 方法，用于从 people 数组中删除指定的行。例如：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let person of people; let i = index">
          <td><input [(ngModel)]="person.name" /></td>
          <td><input [(ngModel)]="person.age" /></td>
          <td><button (click)="removePerson(i)">Delete</button></td>
        </tr>
      </tbody>
    </table>

    <button (click)="addPerson()">Add Person</button>
  `
})
export class AppComponent {
  people = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Charlie', age: 35 }
  ];

  addPerson() {
    this.people.push({ name: '', age: null });
  }

  removePerson(index: number) {
    this.people.splice(index, 1);
  }
}

在这个例子中，我们定义了一个 removePerson 方法，用于从 people 数组中删除指定的行。在模板中，我们添加了一个 Delete 按钮，用于触发 removePerson 方法。

1. 在模板中使用 ngFor 指令渲染表格。

在模板中使用 ngFor 指令循环渲染表格中的数据，并在每行中添加一个 Delete 按钮，用于触发 removePerson 方法。例如：

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let person of people; let i = index">
      <td><input [(ngModel)]="person.name" /></td>
      <td><input [(ngModel)]="person.age" /></td>
      <td><button (click)="removePerson(i)">Delete</button></td>
    </tr>
  </tbody>
</table>

在这个例子中，我们使用 ngFor 指令循环渲染表格中的数据，并在每行中添加一个 Delete 按钮，用于触发 removePerson 方法。

总结

本文介绍了如何使用 Angular 2 添加/删除行到表格，并提供了示例代码。在实际开发中，我们可以根据实际需求，修改示例代码，实现自己的功能。希望本文能够对大家有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c08f76add4f0e0ffa93563