Привязка данных к другому компоненту и использование их в угловом формате с использованием @Input, @Output и EventEmitter

Question

Я пытаюсь передать одну команду из массива команды в другой компонент и использовать ее.Я получаю выбранную команду в том же компоненте (team), что и console.log, но не попадаю в другой компонент (team-detail)

На самом деле, я хочу использовать идентификатор команды для получения сведений о других деталях о команде изAPI.пожалуйста, помогите мне с этим TIA

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

}

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>

Подробная информация о команде

export class TeamDetailComponent implements OnInit {

  @Input() team: any;

  constructor() {
  }

  ngOnInit() {
  }

}

шаблон сведений о команде (этот шаблон только для демонстрационных целей.)

<p>
  {{team.name}}
  {{team.crestUrl}}
  {{team.address}}
  {{team.website}}
</p>

Answer 1

создайте ваше свойство с помощью 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>

Answer 2

«Вывод» идентифицирует события, которые компонент может инициировать для отправки информации по иерархии своему родителю.В вашем случае вы хотите отправить информацию из родительского компонента в дочерний.Поэтому вам не нужно использовать Выходные данные.

Team.component.ts

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

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

шаблон сведений о команде

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