Question

我想基于我通过的group.id动态查询和显示子组件值。现在循环并显示组名，但是我需要传递group.id以便查询API并单独显示基于该ID的值。

// 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装饰器并获取要传递的group.id。

在您的子组件中

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

@Input('groupId') dataId;

调用您的API并绑定变量

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

2 个答案: