以角度显示单个项目下的细节
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了以角度显示单个项目下的细节相关的知识,希望对你有一定的参考价值。
我正在为这个项目使用angular 7和bootstrap 4。我想在所选项目下准确获取详细信息。这是我目前的屏幕截图。
这就是我想要实现的目标。
目前我正在第一张图片中看到页面底部的团队详细信息,但是,我希望团队详细信息正好在所选卡片下方。
这是我的代码:
团队列表组件
export class TeamListComponent implements OnInit {
teams: any;
constructor(private ts: TeamsService) { }
ngOnInit() {
this.ts.getTeams().subscribe(data=> {
this.teams = data.teams;
})
}
}
TeamListTemplate;注意:router-outlet接收团队详细信息组件。
<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;
}
团队模板:注意:我使用bootstrap卡来显示团队
<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
<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
解决问题的一种方法是将<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>
以上是关于以角度显示单个项目下的细节的主要内容,如果未能解决你的问题,请参考以下文章
Android 逆向使用 Python 解析 ELF 文件 ( Capstone 反汇编 ELF 文件中的机器码数据 | 创建反汇编解析器实例对象 | 设置汇编解析器显示细节 )(代码片段
在Tomcat的安装目录下conf目录下的server.xml文件中增加一个xml代码片段,该代码片段中每个属性的含义与用途