Angular中的列表渲染

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/11/30/Angular%E4%B8%AD%E7%9A%84%E5%88%97%E8%A1%A8%E6%B8%B2%E6%9F%93/

摘要

本文主要讲述了：

ngFor指令

正文

`ngFor`指令

trackBy用于辅助 Angular 优化列表渲染的性能

trackBy对应的方法接受 2 个参数：第一个是数组索引，第二个是数组元素

trackBy对应的方法必须返回一个唯一标识符。例如：数组元素的id或者数组索引

示例：

my-angular/src/app/app.component.html

<div *ngFor="let item of jobList; trackBy: jobTrackBy">
  <div>{{ item.jobId }}</div>
  <div>{{ item.jobName }}</div>
  <div>{{ item.salary }}</div>
  <div>{{ item.companyName }}</div>
</div>

my-angular/src/app/types/Job.ts

interface Job {
  jobId: number;
  jobName: string;
  salary: number;
  companyName: string;
  [key: string]: any;
}

export { Job };

my-angular/src/app/app.component.ts

import { Component } from '@angular/core';
import { Job } from './types/Job';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  jobList: Job[] = [
    {
      jobId: 1,
      jobName: '会计',
      salary: 1000,
      companyName: 'A有限责任公司',
      isVip: 1,
    },
    {
      jobId: 2,
      jobName: '销售',
      salary: 2000,
      companyName: 'B有限责任公司',
      isVip: 0,
    },
    {
      jobId: 3,
      jobName: '主管',
      salary: 3000,
      companyName: 'B有限责任公司',
      isVip: 0,
    },
  ];

  jobTrackBy(index: number, item: Job) {
    return item.jobId;
  }
}