Javascript 角度5 w/角度材质-从NGF中提取对象属性以用于组件 {{player.firstName}{{player.lastName}-{{player.id}

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

---

我需要在循环中的给定点提取一个特定的播放器ID，这样我就可以将其传递给一个子编辑播放器组件，该组件打开一个模式，该模式中预先填充了特定播放器的信息（使用NgModel和对API的getbyId调用来获取播放器对象）。我该怎么做呢？

看起来你在使用

@angular/material

。如果是这样的话，您应该能够使用一个点击处理程序来加载播放器数据并打开一个带有其提供的对话框服务的对话框

例如：

模板：

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

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

---

文档：

您希望您的子组件具有类似

@Input（）playerId:any

然后简单地将其以方括号形式传递到子标记中，如下所示：

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);
   });
}

{{player.firstName}{{player.lastName}-{{player.id}

谢谢您的帮助。因为我使用的是材质的对话框组件，所以无法使用“角度输入”属性通过模板传递信息。我将插入此修复程序并完成它。

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