javascript - Angular 5 w/Angular Material - 从 ngFor 中提取对象属性以在组件中使用

Question

    <div *ngFor="let player of players">
      <h4 mat-line>{{player.firstName}} {{player.lastName}} - {{player.id}}</h4>
    </div>

我正在从我的 player.service.ts 文件执行 HTTP get 调用，然后遍历返回的播放器对象，打印出大量播放器列表中的 firstName、lastName 和 id 属性。

我需要在循环中的给定点提取特定玩家 ID，以便我可以将其传递给子 Edit Player 组件，该组件打开一个模式，其中预先填写了该特定玩家的信息(使用 NgModel 和对 API 的 getbyId 调用以获取播放器对象)。我该怎么做呢？

Answer 1

看起来您正在使用 @angular/material。如果是这样，您应该能够使用点击处理程序来加载播放器数据并使用他们提供的对话服务打开对话。

例如:

模板:

 <div *ngFor="let player of players">
    <h4 (click)="handlePlayerClick(player.id)"
        mat-line>
       {{player.firstName}} {{player.lastName}} - {{player.id}}
     </h4>
 </div>

组件:

constructor(private dialogService: MatDialog, private playerApi: PlayerApiService) { }

handlePlayerClick(playerId: string): void {
   // potentially open a MatDialog here
   this.playerApi.getById(playerId).subscribe((playerData: PlayerInterface) => { 
     const dialogConfig = {
        data: {
          playerData: playerData
        }
     } as MatDialogConfig;

     this.dialogService.open(EditPlayerComponent, dialogConfig);
   });
}

文档:https://material.angular.io/components/dialog/api