Угловой список HttpClient

Question

У меня есть список участников в моем компоненте (MemberComponent), я использую MemberService с HttpClient для извлечения данных.

Существует мой MemberService:

@Injectable({
  providedIn: 'root'
})
export class MemberService {

  constructor(private http: HttpClient) { }

  getMembers(): Observable<IMember[]> {
    return this.http.get<IMember[]>('http://localhost:50867/api/Member');
  }

  getMember(memberId) {
    return this.http.get('http://localhost:50867/api/Member/' + memberId);
  }
}

Когда яотобразить эти данные в моем MemberComponent.html, который выполняет.

Есть мой MemberComponent.ts:

export class MemberComponent implements OnInit {

  public members = [];

  constructor(private _memberService: MemberService) { }


  ngOnInit() {
    this._memberService.getMembers()
      .subscribe(data => this.members = data);
  }

И это мой MemberComponent.html:

<h2>Members list</h2>
<ul>
  <li *ngFor="let member of members">
    <a routerLink="/details/{{member.idUser}}">{{ member.username }}</a>

    <ul>
      <li>{{ member.emailUser }}</li>
    </ul>
  </li>
</ul>

Таким образом, вы можете видеть в моем Html <a routerLink ...>, когда я нажимаю на него, он открывает мой DetailComponent, в этом компоненте я пытаюсь отобразить больше информации о члене, но я не знаю, как это сделать: /

Вот мой ДетальныйКомпонент:

<h1>{{ members.name }}</h1>

<ul>
  <li><strong>wow:</strong> {{ members.username }}</li>
  <li><strong>Email:</strong> {{ members.email }}</li>
  <li><strong>Phone:</strong> {{ members.phone }}</li>
</ul>

Можете ли вы помочь мне заранее поблагодарить;)

Answer 1

Определите корень, который отображает подробную страницу в модуле маршрута.Например,

 { path: 'details/:id', component: DetailComponent },

в деталях компонента ts.

    constructor(
            .....
            private route: ActivatedRoute,
private _memberService: MemberService) {

Вам необходимо ввести ActivatedRoute в ваш компонент.

Определение memberId в файле ts,

Вы можете получить Id в функции Init.

if (this.route.snapshot.params.id) {
            this.memberId= this.route.snapshot.params.id;
        } 

Затем позвоните в вашу службу.

 this._memberService.getMember(this.memberId)
      .subscribe(data => this.member = data);

Подробности html должны быть

<h1>{{ member.name }}</h1>

<ul>
  <li><strong>wow:</strong> {{ member.username }}</li>
  <li><strong>Email:</strong> {{ member.email }}</li>
  <li><strong>Phone:</strong> {{ member.phone }}</li>
</ul>