[Angular] 笔记 4：ngFor

最新推荐文章于 2025-04-06 06:47:02 发布

原创最新推荐文章于 2025-04-06 06:47:02 发布 · 761 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

当前文章被以下社区和专栏收录：

本文解释了Angular中ngFor循环的用法，展示了如何在typescript中定义接口并用ngFor遍历pokemons列表，展示了如何在Web页面上显示动态数据。

ngFor 是一个 for 循环，只能用于循环遍历 list，不能用于遍历单个实体。

下图中的 pokemons 通常是数据库中的数据：
在这里插入图片描述
例子：
app.components.ts:

// 使用类型检查
interface Pokemon {
  id: number;
  name: string;
  type: string;
  // isCool: boolean;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  pokemons: Pokemon[] = [
    {
      id: 1,
      name: 'pikachu',
      type: 'electric',
    },
    {
      id: 2,
      name: 'squirtle',
      type: 'water',
    },
    {
      id: 3,
      name: 'charmander',
      type: 'fire',
    },
  ];

  constructor() {}
}

app.component.html:

<table>
  <thead>
    <th>Index</th>
    <th>Name</th>
    <th>Type</th>
  </thead>
  <tbody>
    <tr *ngFor="let pokemon of pokemons; let i = index">
      <td>{{ i }}</td>
      <td>{{ pokemon.name }}</td>
      <td>{{ pokemon.type }}</td>
    </tr>
  </tbody>
</table>