Question

我试图通过单击客户ID或名称来获取特定的客户详细信息，我已经将名称作为链接，以便在单击该名称时将路由到以ID为参数的下一页，并显示所有详细信息的特定客户，因此有人可以建议我以简单的方式在角度6中执行此操作。（有关演示项目的链接将很有帮助）

Answer 1

假设这里有很多事情，但据我了解，您有两个不同的页面-一个页面上有一个带有ID的客户，并且您希望基于该ID导航到包含客户详细信息的另一个页面。

我们说这是客户组成部分。因此，HTML将具有一些按钮或链接，例如：

 <button type="button" class="btn btn-info desc" (click)="openCard(card._id)">Open</button>

在您的客户组件中，您将有一个事件监听器：

 public openCard(_id: string) {
  this.router.navigate(['/detail', _id]);
 }

您将拥有一个路由模块，该模块负责发生的各种路由：

 const routes: Routes = [
      { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
      { path: 'dashboard', component: CardComponent },
      { path: 'detail', component: CardDetailComponent },
      { path: 'detail/:details', component: CardDetailComponent },
 ];

 @NgModule({
     imports: [ RouterModule.forRoot(routes) ],
     exports: [ RouterModule ]
 })
 export class AppRoutingModule {}

路径内的最后一行负责处理id部分，该ID部分将用于在客户详细信息组件内执行必要的逻辑。此路由模块应导入您的应用程序模块中。

在客户详细信息组件中。

 ngOnInit() {

   this.route.params.forEach((params: Params) => {
     this.fetchDataService.getData().subscribe( data => {
     this.cards = [...data];
     this.cardDetails = this.cards.find(card => card._id === params.details);
   })
 });
}

然后在卡片详细信息模板内部：

 <div class="card" *ngIf="cardDetails">
   <img class="card-img-top" src="../assets/avatar.png" alt="{{cardDetails.title}}">
   <div class="card-body">
     <h5 class="card-title">{{cardDetails.title}}</h5>
     <p class="card-text">{{cardDetails.description}}</p>
   </div>
</div>

如果您需要更多详细信息，可以看看我创建的这个仓库，如果您想了解更多详细信息，请访问：GitHub Angular 5 Seed Master 尽管这是在angular 5中编写的。对于Angular 6，代码不会有太大不同。

这还包含使用服务从模拟json获取数据。

Answer 2

selectedHero：Hero;
onSelect（hero：Hero）：void {
this.selectedHero = hero;
}

（在组件.ts文件中使用上面的代码（选择时））

{{selectedHero.name |大写}}详细信息

id： {{selectedHero.id}}

名称：
<输入[（ngModel）] =“ selectedHero.name”占位符=“名称”>

（在组件中使用以上代码.html文件（选定的英雄详细信息）

如何在Angular 6中使用ID获取特定数据

2 个答案:

{{selectedHero.name |大写}}详细信息