2017-02-10 21 views
3

私は角2でデモアプリケーションを作成しかし、これをしながら午前、私はこのエラーを得た:TrackByは関数である必要がありますが、未定義です。

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'  } 
     ]; 
} 

答えて

2

trackByは、2つの引数:indexitemを持つ関数をとります。 trackByが指定されている場合、角度トラックは関数の戻り値によって変化します。

ですから、2.4.2がNgForTrackByhttps://github.com/angular/angular/blob/master/CHANGELOG.md#242-2017-01-06

ため null/undefined値を使用することを許可されているので、あなたのコンポーネントに

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

を名前trackByIdと機能を持っている必要があります

0

SecurityComponentを定義する必要がtrackById

export class SecurityComponent { 
    trackById({id}: Hero) { 
    return id; 
    } 
} 
関連する問題