Question

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

core.umd.js：3491 EXCEPTION：未捕获（在承诺中）：错误：security.component.html：35：72中的错误：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 https://github.com/angular/angular/blob/master/CHANGELOG.md#242-2017-01-06

的NgForTrackBy值

Answer 2

SecurityComponent需要定义trackById

export class SecurityComponent {
  trackById({id}: Hero) {
    return id;
  }
}

TrackBy必须是一个函数，但收到undefined In angular 2？

2 个答案: