我有所有团队和子组件的父组件，用于使用* ngFor和@Input在框中显示每个团队 . 所有子组件都显示正常，但是当我想要更改每个组件打开模态时，我总是从团队数组中的第一个对象获取数据 .

team.component.html

<app-team-box *ngFor="let team of teams" [team]="team"></app-team-box>

team-box.component.html

<div class="ibox"> 
  <div class="ibox-title">
    <h5>{{this.team.name}}</h5>
    <a class="btn btn-xs" (click)="openEditTeamModal(this.team)">Edit</a>
  </div> 
</div>

<div class="modal fade" id="edit_team_modal">
<div class="modal-dialog">
  <div class="modal-content">
    <form role="form" (ngSubmit)="editTeam()" novalidate>
      <div class="modal-body">
        <div class="row" *ngIf="this.team">
          <label>Team name:</label>
          <input type="text" id="name" name="name" [(ngModel)]="this.team.name" #name="ngModel">
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit">Save</button>
      </div>
    </form>
  </div>
</div>

team-box.component.ts

export class TeamBoxComponent implements OnInit {   
  @Input() team;

  constructor(private teamService: TeamService) {}

  openEditTeamModal(selectedTeam): void {
    this.team = selectedTeam;
    $("#edit_team_modal").modal();
    $(".modal").appendTo("html");
  }

  editTeam(): void {
    this.teamService.update(this.team).subscribe((team: Response) => {
      $("#edit_team_modal").modal("hide");
    });
  }
}

问题是，当我改变第一个一切都很好，模态填充名称，并在更改后得到保存 . 但是当我点击编辑按钮例如第二个团队时，在模态中我获得了第一个团队的数据 . 为什么this.team总是引用团队数组中的第一个对象？

javascript angular angular-components