将值传递给子组件并将其用作 Angular 中的查询参数

Question

我想根据我传递的 group.id 动态查询和显示子组件值。它现在循环并显示组名，但我需要传递 group.id 才能查询 API 并单独显示基于该 ID 的值。

//summary_data.groups -> 是来自 api

的数据

摘要数据组包含定义和组名。我将传递组名以调用另一个方法和 returns 那些基于组名的数据库。

<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

您可以使用 @Input 装饰器并获取您传递的 group.id。

在你的子组件中

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

@Input('groupId') dataId;

调用您的 API 并绑定变量

Answer 2

据我了解，您想通过 child 组件内的 API 获取组数据，然后 return 此结果到 parent 结果，以便能正常显示吗？

这似乎是一种显示数据的复杂方式。我制作了一个 stackblitz 来向您展示如何使用您的数据实现您想要的 html。

唯一不同的是 child 组件从 api 获取数据，并在其自己的 html 中显示数据。 *ngFor 也在 child 中。

<!-- 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>

将值传递给子组件并将其用作 Angular 中的查询参数

Pass value to child component and use it as query parameters in Angular

parent-child

ngfor

angular