Итерируйте Array внутри Array и свяжите данные в html, используя строковую интерполяцию в угловых - PullRequest
Новая
       33

Итерируйте Array внутри Array и свяжите данные в html, используя строковую интерполяцию в угловых

0 голосов
/ 12 февраля 2019

Я хочу перебрать свой массив данных 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 раза.Пожалуйста, помогите.

1 Ответ

0 голосов
/ 12 февраля 2019

Я думаю, если вы предоставите скриншот ожидаемого результата, который поможет вам получить лучший ответ.Исходя из имеющихся данных и кода, похоже, что 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>
...