Связывание данных в Angular2 for loop

Question

Я работаю над проектом, который извлекает данные из Firebase и отображает все это внутри div в цикле ngFor. Когда вы нажимаете на div, он открывает модальный, который отображает данные в div. Все работает, за исключением тех случаев, когда я нажимаю, чтобы открыть модальный, он отображает данные только для первого div независимо от того, на какой div я нажимаю. Я надеюсь, что я пропускаю что-то простое, чтобы передавать правильные данные каждый раз, когда нажимается div.

<div *ngFor="let game of games | async; trackBy:trackByGame" (click)="modal.open()"> 
    <gamemodal [game]="game"></gamemodal> 
</div> 

компонент

export class gameModalComponent { 
    @Input() game: FirebaseListObservable<any>; 
    constructor() { } 

    @ViewChild(ModalComponent) modal: ModalComponent; 

    open() { 
    this.modal.open(); 
    } 

    close() { 
    this.modal.close(); 
    } 
} 

Вот где игры загружаются из Firebase

export class AppComponent { 
    @ViewChild(gameModalComponent) 
    modal: gameModalComponent; 
    games: FirebaseListObservable<any>; 
    cwstring = '/Games/5'; 
    trackByGame(game: any){ 
    return game != null ? game.gameid: null; 
    } 

    constructor(af: AngularFire) { 
    this.games = af.database.list(this.cwstring, { 
     query: { 
     orderByChild: 'status' 
     } 
    }) 
    } 

Любые идеи? Заранее спасибо.

Answer 1

Я понял, решение этого. Я добавил функцию в компоненте:

app.component.ts

onClick(game) { 
    this.modal.game = game; 
    this.modal.open(); 
    } 

Затем модифицировали HTML:

app.component.html

<div *ngFor="let game of games | async;trackBy:trackByGame" (click)="onClick(game)"> 

КАЖЕТСЯ работать нормально!

Answer 2

Чтобы настроить алгоритм отслеживания по умолчанию, NgFor поддерживает функцию trackBy. trackBy принимает функцию, которая имеет два аргумента: index и item. Если указано trackBy, угловые дорожки изменяются по возвращаемому значению функции.

https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html

Похоже, ваша функция trackBy неверна, так как первый параметр должен быть индекс. Попробуйте изменить подпись функции на

trackByGame(index: number, game: any){ 
    return game != null ? game.gameid: null; 
} 

и посмотрите, поможет ли это.

Edit:

Также trackBy используется для улучшения производительности и необходим только для больших наборов данных. Если вы не отслеживаете огромные списки, я предлагаю сделать это без trackyBy по директиве *ngFor.