Question

我正在开发一个从Firebase提取数据并在ngFor循环中将其全部显示在div内部的项目。当您单击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

要自定义默认跟踪算法，NgFor支持trackBy选项。 trackBy接受一个有两个参数的函数：index和item。如果给出了trackBy，则Angular跟踪由函数的返回值改变。

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

看起来你的trackBy函数不正确，因为第一个参数应该是索引。尝试将功能签名更改为

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

看看是否有帮助。

编辑：

此外，trackBy用于提高性能，仅用于大型数据集。如果您没有跟踪大型列表，我建议在没有trackyBy指令的*ngFor的情况下进行此操作。

Answer 2

我找到了解决方法。我在组件中添加了一个函数：

<强> 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)">

似乎工作正常！

Angular2 for for循环

2 个答案: