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

【问题标题】：Angular 5 w/Angular Material - Extracting an object property from ngFor to use in componentAngular 5 w/Angular Material - 从 ngFor 中提取对象属性以在组件中使用
【发布时间】：2018-02-06 22:33:06
【问题描述】：

    <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 调用以获取播放器对象）。我该怎么做呢？

【问题讨论】：

标签： javascript loops object angular5

【解决方案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

【讨论】：

谢谢你。由于我使用的是材质的对话框组件，因此我无法使用 Angular 输入属性通过模板传递信息。我将插入此修复程序并解决它。

【解决方案2】：

您希望您的子组件具有类似@Input() playerId: any; 的属性，然后简单地将其放在方括号中传递到子标签中，如下所示：

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

【讨论】：