HTML 使用 ngFor 动态生成 Angular 表格

来源：恒创科技编辑：恒创科技编辑部

2024-04-18 18:00:59

在 Angular 中，使用 *ngFor 指令可以动态生成表格。将数据绑定到表格的行和列，通过 ngFor 循环遍历数据并生成相应的表格元素。

我们需要创建一个Angular组件，并在其中使用ngFor指令动态生成表格，以下是一个简单的示例：

1、创建一个名为app.component.html的文件，内容如下：

<div>
  <h2>动态生成的表格</h2>
  <table border="1">
    <thead>
      <tr>
        <th>标题1</th>
        <th>标题2</th>
        <th>标题3</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of items; let i = index">
        <td>{{ item.title1 }}</td>
        <td>{{ item.title2 }}</td>
        <td>{{ item.title3 }}</td>
      </tr>
    </tbody>
  </table>
</div>

2、在app.component.ts文件中，添加以下代码：

import { Component } from '@angular/core';
@Component({
  selector: 'approot',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = '动态表格示例';
  items = [
    { title1: '数据1', title2: '数据2', title3: '数据3' },
    { title1: '数据4', title2: '数据5', title3: '数据6' },
    { title1: '数据7', title2: '数据8', title3: '数据9' }
  ];
}

接下来，我们将创建一个相关问题与解答的栏目，在app.component.html文件中，添加以下代码：

<div>
  <h2>相关问题与解答</h2>
  <ul>
    <li>
      <h3>问题1：如何使用ngFor指令动态生成表格？</h3>
      <p>答：在Angular组件中，可以使用*ngFor指令和数组来动态生成表格，在上面的示例中，我们创建了一个名为items的数组，并使用*ngFor指令遍历该数组以生成表格的每一行。</p>
    </li>
    <li>
      <h3>问题2：如何为表格添加样式？</h3>
      <p>答：可以在组件的CSS文件中为表格添加样式，在上面的示例中，我们在app.component.css文件中添加了以下代码：</p>
      <pre><code>table {
  width: 100%;
  bordercollapse: collapse;
}
th, td {
  border: 1px solid black;
  padding: 8px;
  textalign: left;
}
th {
  backgroundcolor: #f2f2f2;
}</code></pre>
    </li>
  </ul>
</div>

现在，当运行应用程序时，将显示一个动态生成的表格和一个相关问题与解答的栏目。

本文地址：https://www.henghost.com/jishu/55491/