显示单个项目下的详细信息

Question

我正在为此项目使用angular 7和bootstrap 4。我想确切了解所选项目下的细节。这是我当前正在使用的屏幕截图。

这就是我想要实现的目标。

目前，如您在第一张图片中所见，我正在页面底部看到团队详细信息，但是，我希望团队详细信息位于所选卡的正下方。

这是我的代码：

TeamListComponent

export class TeamListComponent implements OnInit {

  teams: any;

  constructor(private ts: TeamsService) { }

  ngOnInit() {
    this.ts.getTeams().subscribe(data=> {
      this.teams = data.teams;
    })
  }
}

TeamListTemplate;注意：路由器插座将带入团队详细信息组件。

<div class="container-fluid">
  <div class="row">
    <app-team *ngFor="let team of teams" [team]=team></app-team>
  </div>
<div class="row">
  <router-outlet></router-outlet>
</div>
</div>

单个团队成员

export class TeamComponent{
      @Input() team: any;
}

团队模板：注意：我正在使用引导卡来显示团队

<div class="card border-dark " style="width: 300px; height: 450px; margin: 10px;" [routerLink]="team.id"
     routerLinkActive="active">
  <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-outline-dark btn-lg btn-block" target="_blank">Visit Website</a>
  </div>
</div>

如果您需要更多详细信息，请向我提出解决方案，请告诉我。 TIA

Answer 1

<div class="container-fluid">
  <div class="row">
    <app-team *ngFor="let team of teams" [team]=team></app-team>
    <div><router-outlet></router-outlet></div>
  </div>
</div>


Just place your router-outlet inside the same row and make some the adjustment according your need. Hope it will help

Answer 2

解决问题的一种方法是将<team-detail></team-detail>放在<team></team>元素内。当用户单击它时，它会显示<team-detail></team-detail>，这样它将显示在该组件的下方。

另一种方法是在<ng-content></ng-content>中使用<team></team>。并按如下所示传递<team-detail></team-detail>，

<team> <team-detail></team-detail> </team>