Передайте значение дочернему компоненту и используйте его в качестве параметров запроса в Angular

Question

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

// summary_data.groups -> это данные из API

Сводные группы данных содержат определения и названия групп. Я передам имена групп для вызова другого метода и верну базу данных по имени группы.

<div class="list" *ngFor="let data of summary_data.groups">

            <div  *ngFor="let group of toArray(data.measurements)">
                        <span>{{group.name}}</span>  
                        <child [userId]="id" [dataId]="group.id"></child>
            </div>

</div>

Ожидаемый результат:

    <div class="list">

    <span>1 Group Personal Information</span>

        <child> heightValueFromQuery  </child> 
        <child> ageValueFromQuery  </child>
        <child> genderValueFromQuery  </child>


    <span>2 Group Medical Information</span>

        <child> bloodtypeValueFromQuery </child>
        <child> vitalValueFromQuery  </child> 


    ...so on    

    </div>

// child.component.ts

export class StatusListComponent implements OnInit {
  @Input() groupId: any;
  @Input() userId: any;
  private finished: boolean;

  ngOnInit(): void {

  }


  getDataByGroupId() {

    this.customersActions.getPatientStatus(this.userId, this.groupId).subscribe(
      data => this.groupData = data,
      error => console.log('data err', error),
      () => console.log("data complete", this.finished = true)
    );
  }


}

дочерний компонент HTML

<strong>Group Data Result {{groupData | json}} </strong>

<mat-progress-bar mode="determinate"
                  value="{{groupData.value == 1 ? 50 : (groupData.value == 2 ? 100 : 0) }}"
                  [ngClass]="{ 'ok': groupData.value == 0,
                                        'warning': groupData.value == 1,
                                        'red': groupData.value == 2
                                      }">
</mat-progress-bar>

Answer 1

Насколько я понимаю, вы хотите получить групповые данные по API внутри вашего дочернего компонента, а затем вернуть этот результат в родительский результат, чтобы он мог правильно его отобразить?

Это кажется сложным способом отображения ваших данных. Я сделал stackblitz , чтобы показать вам, как получить HTML, который вы хотите с вашими данными.

Все, что изменяется, - это то, что дочерний компонент получает данные из API и отображает их в своем HTML. * NgFor также находится внутри ребенка.

<!-- app.component.html -->
<div class="list" *ngFor="let group of summary_data.groups">
  <child [userId]="id" [group]="group"></child>
</div>

<!-- The child.component.html -->
<span>{{group.name}}</span>
<div *ngFor="let data of groupData">{{data}}</div>

Answer 2

Вы можете использовать @Input decorator и получить group.id, который вы передаете.

В вашем дочернем компоненте

import { Component, Input } from '@angular/core';

@Input('groupId') dataId;

вызвать API и связать переменные