Html 将数据绑定到另一个组件，并使用@Input、@Output和EventEmitter以角度使用它

我试图从另一个组件中的团队数组中传递一个团队并使用它。我在与console.log相同的组件（team）中获取所选团队，但没有在另一个组件（team detail）中获取

实际上，我想使用团队id从API中获取关于团队的其他详细信息。请帮我解决这个问题

Team.component.ts

    export class TeamsComponent implements OnInit {

  @Output() selectedTeam = new EventEmitter<any>();

  constructor(private general: GeneralService) {
  }

  teamsObject: any;
  teams: [];

  ngOnInit() {
    this.loadTeams();
  }

  loadTeams() {
    this.general.getTeams().subscribe(data => {
      this.teamsObject = data;
      this.teams = this.teamsObject.teams;
    });
  }

  onSelectTeam(team: any) {
    this.selectedTeam.emit(team);
  }

}

export class TeamsComponent implements OnInit {

  selectedTeam:any;

  constructor(private general: GeneralService) {
  }

  teamsObject: any;
  teams: [];

  ngOnInit() {
    this.loadTeams();
  }

  loadTeams() {
    this.general.getTeams().subscribe(data => {
      this.teamsObject = data;
      this.teams = this.teamsObject.teams;
    });
  }

  onSelectTeam(team: any) {
    this.selectedTeam = team;
  }

}

团队详细信息模板（此模板仅用于演示。）

{{team.name}
{{team.crestUrl}}
{{团队地址}
{{team.website}

“输出”标识组件可以触发的事件，以将层次结构中的信息发送到其父级。在您的情况下，您希望将信息从父组件发送到子组件。所以您不需要使用输出

Team.component.ts

    export class TeamsComponent implements OnInit {

  @Output() selectedTeam = new EventEmitter<any>();

  constructor(private general: GeneralService) {
  }

  teamsObject: any;
  teams: [];

  ngOnInit() {
    this.loadTeams();
  }

  loadTeams() {
    this.general.getTeams().subscribe(data => {
      this.teamsObject = data;
      this.teams = this.teamsObject.teams;
    });
  }

  onSelectTeam(team: any) {
    this.selectedTeam.emit(team);
  }

}

export class TeamsComponent implements OnInit {

  selectedTeam:any;

  constructor(private general: GeneralService) {
  }

  teamsObject: any;
  teams: [];

  ngOnInit() {
    this.loadTeams();
  }

  loadTeams() {
    this.general.getTeams().subscribe(data => {
      this.teamsObject = data;
      this.teams = this.teamsObject.teams;
    });
  }

  onSelectTeam(team: any) {
    this.selectedTeam = team;
  }

}

team.component.html

<div class="container-fluid " >
<div class="row " >
  <div class="col-xs-12" *ngFor="let team of teams">
    <div class="card border-dark " style="width: 250px; height: 450px; margin: 10px;" (click)="onSelectTeam(team)">
      <img class="card-img-top embed-responsive" src="{{team.crestUrl}}" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">{{team.name}}</h5>
        <p class="card-text">{{team.address}}</p>
        <a href="{{team.website}}" class="btn btn-primary" target="_blank">Visit Website</a>
      </div>
    </div>
  </div>
</div>
  <app-team-detail *ngIf="selectedTeam" [team]="selectedTeam"></app-team-detail>
</div>

 <app-team-detail *ngIf="selectedTeam" [team]="selectedTeam"></app-team-detail>

团队详细信息模板

<p *ngIf="team">
  {{team.name}}
  {{team.crestUrl}}
  {{team.address}}
  {{team.website}}
</p>

{{team.name}
{{team.crestUrl}}
{{团队地址}
{{team.website}

在子组件中使用getter和setter创建属性，其余代码保持原样

_team: any;
get team(): any {
    return this._team;
}

@Input()
set team(value: any) {
    this._team = value;
}

在儿童时期

<p *ngIf="team">
  {{team.name}}
  {{team.crestUrl}}
  {{team.address}}
  {{team.website}}
</p>

{{team.name}
{{team.crestUrl}}
{{团队地址}
{{team.website}

不工作。。双向数据绑定似乎不正确。如果您可以创建stackblitz，则此尝试解决方案不需要双向绑定