angular - TrackBy 必须是一个函数，但在 Angular 2 中收到未定义？

Question

我正在 Angular 2 中创建一个演示应用程序。但是在执行此操作时，我遇到了这个错误:

core.umd.js:3491 EXCEPTION: Uncaught (in promise): Error: error in security.component.html:35:72 caused by: trackBy 必须是一个函数，但未定义。错误:trackBy 必须是函数，但收到未定义

任何人都可以建议我在下面的代码中做错了什么？

security.component.html:

<h2>Template :</h2>
<template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById">
  <div [class.odd]="odd">({{i}}) {{hero.name}}</div>
</template>

security.component.ts:

import { Component,Input } from '@angular/core';
@Component({
    moduleId    :     module.id,
    selector    :     'security-component',
    templateUrl :     '../views/security.component.html'
})

export class securityComponent{

    private heroes = [
    {id: 11, name: 'Mr. Nice'     },
    {id: 12, name: 'Narco'        },
    {id: 13, name: 'Bombasto'     },
    {id: 14, name: 'Celeritas'    },
    {id: 15, name: 'Magneta'      },
    {id: 16, name: 'RubberMan'    },
    {id: 17, name: 'Dynama'       },
    {id: 18, name: 'Dr IQ'        },
    {id: 19, name: 'Magma'        },
    {id: 20, name: 'Tornado'      }
      ];
}

Answer 1

trackBy 接受一个有两个参数的函数:index 和 item。如果给出了 trackBy，Angular 通过函数的返回值来跟踪变化。

因此您需要在组件中使用名称为 trackById 的函数

trackById(index, hero) {
  return hero.id    
}

因为 2.4.2 允许使用 null/undefined 值给 NgForTrackBy https://github.com/angular/angular/blob/master/CHANGELOG.md#242-2017-01-06