在Array内部迭代Array并使用字符串插值以角度绑定html中的数据

Question

我想迭代我的json数据Array of Array并在我的html文件中使用字符串插值来绑定数据。我的JSON数据如下

export interface Patient {
    _id: string;
    name: string;
    gender: string;
    age: number;
}

export interface Range {
    unit: string;
    high?: number;
    low?: number;
}

export interface Result {
    result: string;
    test_name: string;
    range: Range;
    reference_range: string;
    description: string;
    critical_range: Critical;
}

export interface Critical {
    low: number;
    high: number;
}

export interface TestOrder {
    name: string;
    priority: number;
    pixel_height: number;
    result: Result;
}

export interface Testgroup {
    name: string;
    priority: number;
    weight: number;
    exclusive: boolean;
    test_order: TestOrder[];
    special_font: number;
    attachment: boolean;
}

export interface Report {
    department_name: string;
    department_proirity: number;
    testgroups: Testgroup[];
}

export interface Price {
    mrp: number;
    user: number;
}

export interface Doctor {
    approved_on: string;
    approved_by: string;
    doctor_sign: string;
}

export interface RootObject {
    patient: Patient;
    approved_by_doctor: Doctor;
    report: Report[];
    price: Price;
    doctor: string;
    lab: string;
    booking_id: string;
    sample_date: string;
    report_header: string;
}

export interface ReportInterface {
    status: boolean;
    message: string;
    code: number;
    data: RootObject;
}

我试图遍历我的报告数据并在材料可折叠面板上打印测试组名称，对于可折叠面板上的每个测试组。下面是我的html代码，我的接口名称是reportInterface，我把我的json数据放在哪里。

<div *ngFor="let report1 of reportInterface.report">
    <div *ngFor="let testgroup of report1.testgroups">
        <div class="w3-container w3-card w3-white w3-round w3-margin"><br>
            <div class="w3-row-padding"
                style="margin:0 -16px">
                <mat-accordion>
                    <mat-expansion-panel (opened)="panelOpenState = true"
                        (closed)="panelOpenState = false">
                        <mat-expansion-panel-header>
                            <mat-panel-title>
                                <p style="color:#385b9d;font-weight: 700"> {{testgroup.name}}
                                </p>
                            </mat-panel-title>

                            <mat-panel-description>
                                {{panelOpenState ? 'Close' : 'Open'}}
                            </mat-panel-description>
                        </mat-expansion-panel-header>

                        <div *ngFor="let testorder of testgroup.test_order">
                            <p style="font-weight:600">{{testorder.name}}</p>

                            <div *ngIf="testgroup.attachment===false">
                                <p>This test is bad</p>
                            </div>

                            <div *ngIf="testorder.result.result<testorder.result.range.low || 
        testorder.result.result>testorder.result.range.high">
                                <p style="color:red;font-weight: 500">Result :
                                    {{testorder.result.result}}</p>
                            </div>

                            <div *ngIf="testorder.result.result>=testorder.result.range.low && 
        testorder.result.result<=testorder.result.range.high">
                                <p style="color:rgb(0,255,0);font-weight: 
        500">Result : {{testorder.result.result}}</p>
                            </div>

                            <p style="font-weight:500">Reference Range :
                                {{testorder.result.reference_range}}</p>

                            <p>Description:{{testorder.result.description}}</p>

                            <hr>
                        </div>
                    </mat-expansion-panel>
                </mat-accordion>
            </div>
        </div>
    </div>
</div>

这段代码的问题在于它循环两次，因此它不是打印可折叠卡2次而是打印4次。请帮忙。

Answer 1

我想如果你能提供预期输出的截图，那将有助于你获得更好的答案。根据可用的数据和代码，看起来w3-container w3-cards是您的可折叠菜单容器。因此，尝试应用ngFor并迭代此容器。

以下是示例代码::

 <div>
    <div>
        <div *ngFor="let report1 of reportInterface.report" class="w3-container w3- 
         card w3-white w3-round w3-margin"><br>
            <div *ngFor="let testgroup of report1.testgroups" class="w3-row-padding"
                style="margin:0 -16px">
                <mat-accordion>
                    <mat-expansion-panel (opened)="panelOpenState = true"
                        (closed)="panelOpenState = false">
                        <mat-expansion-panel-header>
                            <mat-panel-title>
                                <p style="color:#385b9d;font-weight: 700"> 
                                 {{testgroup.name}}
                                </p>
                            </mat-panel-title>

                            <mat-panel-description>
                                {{panelOpenState ? 'Close' : 'Open'}}
                            </mat-panel-description>
                        </mat-expansion-panel-header>

                        <div *ngFor="let testorder of testgroup.test_order">
                            <p style="font-weight:600">{{testorder.name}}</p>

                            <div *ngIf="testgroup.attachment===false">
                                <p>This test is bad</p>
                            </div>

                            <div 
                  *ngIf="testorder.result.result<testorder.result.range.low || 
                   testorder.result.result>testorder.result.range.high">
                                <p style="color:red;font-weight: 500">Result :
                                    {{testorder.result.result}}</p>
                            </div>

                            <div 
                  *ngIf="testorder.result.result>=testorder.result.range.low && 
                   testorder.result.result<=testorder.result.range.high">
                                <p style="color:rgb(0,255,0);font-weight: 
                    500">Result : {{testorder.result.result}}</p>
                            </div>

                            <p style="font-weight:500">Reference Range :
                                {{testorder.result.reference_range}}</p>

                            <p>Description:{{testorder.result.description}}</p>

                            <hr>
                        </div>
                    </mat-expansion-panel>
                </mat-accordion>
            </div>
        </div>
    </div>
</div>