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

debugcn 发表于 Dev

辣泡菜

我想根据我传递的 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>

卡普卡什

据我了解，你是想通过子组件内部的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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。