Как получить конкретные данные, используя идентификатор в Angular 6

Question

Я пытаюсь получить конкретную информацию о клиенте, щелкнув по идентификатору или имени клиента. Я сделал имя в качестве ссылки, чтобы при щелчке он направлялся на следующую страницу с идентификатором в качестве параметра и отображал все детали.конкретного клиента, так что может кто-нибудь предложить мне простой способ сделать это в угловых 6.(ссылка о демонстрационном проекте будет полезна)

Answer 1

selectedHero: Hero;
onSelect(hero: Hero): void {
  this.selectedHero = hero;
}

(используйте указанный выше код в файле component .ts (при выборе))

<h2>{{selectedHero.name | uppercase}} Details</h2>
<div>
  <span>id: </span>{{selectedHero.id}}
</div>
<div>
  <label>name:
  <input [(ngModel)]="selectedHero.name" placeholder="name">
  </label>
</div>

(используйте указанный выше код в файле component.html (сведения о выбранном герое))

Answer 2

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

Допустим, это клиентский компонент.поэтому в 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, которая будет использоваться для выполнения необходимой логики внутри компонента сведений о клиенте.Этот модуль маршрутизации должен быть импортирован в ваш модуль приложения.

В компоненте сведений о клиенте.

 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 Хотя это в угловых 5. Код не будет сильно отличаться для Angular 6.

Это также содержит использование службы для извлеченияданные из макета JSON.