以角度顯示JSON數據（帶有打字稿）

Question

我以前曾發布過這篇文章，但沒有很多有用的答案

我有包含以下數據的JSON文件：

[{
    "ID": 1030980,
    "Component": "Glikoza (Gluk)",
    "Result": "16",
    "Date": "20.10.2018"
  },
  {
    "ID": 1030980,
    "Component": "Kreatinin (Creat)",
    "Result": "5",
    "Date": "19.10.2018"
  },
  {
    "ID": 1030989,
    "Component": "Urea (UN)",
    "Result": "1",
    "Date": "19.10.2018"
  },
  ...this goes on and on
]

更新：我將此代碼添加到我的Patient.component：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
 selector: 'app-patients',
templateUrl: './patients.component.html',
styleUrls: ['./patients.component.css']
})

export class PatientsComponent implements OnInit {
  title = 'Patient Data';

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.http
    .get('./assets/patients.json')
    .subscribe(res => {
      const patients = res['patients'];
      const patient = patients[0];
      for (let i = 0; i < patients.length; i++) {
        let item = patients[i];
        console.log(item['ID'], item['date'], item['component'], item['result']);
      }
    });
  }
}

現在，我需要按患者ID和按日期連續獲取“組件”和“結果”（顯示不同日期和ID的每個組件的結果）。 該表應顯示特定ID和日期的所有組件和結果，如下所示：

表

你能給我一些指導嗎？ 謝謝！

Answer 1

根據您已經取得的成就，您真該死。

1.為患者創建類型（模型）

export class Patient {
    constructor(public ID: string,
        //ALL THE PROPERTIES OF THE MODEL
    ) {}
}

2.將模型綁定到您的組件

• 里面你patients.component.ts：

  private patients : Patient[] = [];

在httpclient上訂閱get方法之前。 將組件放置在變量中，以便可以在其上設置模型：

var self = this; //This is now the PatientsComponent variable
this.http
    .get('./assets/patients.json')
    .subscribe(res => {
      let patients = res['patients'];
      let patient = patients[0];
      self.patients = patients; //SETTING THE MODEL ON THE COMPONENT
      for (let i = 0; i < patients.length; i++) {
        let item = patients[i];
        console.log(item['ID'], item['date'], item['component'], item['result']);
      }
    });

3.使用* ngFor構建您的html模板

在Patient.component.html內部（編輯-將Components列表綁定到名為components的組件類）：

<table>
  <thead>
    <th>ID</th> 
    <th>Date</th>
    <th *ngFor="let component of components">{{ component }}</th>
  </thead>
  <tbody>
    <tr *ngFor="let patient of patients">
        <td>{{ patient.ID }}</td>
        <td>{{ patient.Date}}</td>
        <td *ngFor="let component of components"> {{ (patient.Component === component) ? patient.Result : "-" }}</td>
    </tr>
  </tbody>
</table>

4. [編輯]篩選我們的患者結果

public static FilterFunc(patients : Patient[]) {
    let uniques: Patient[] = [];

    patients.forEach(function (value: Patient, index: number) { 
        if (uniques.some(function (patientCompare: Patient) {
            return (patientCompare.Date === value.Date && patientCompare.ID === value.ID && patientCompare.Component === value.Component);
        })) {
            let updatePatient = uniques.find(function (patientCompare: Patient) {
                return (patientCompare.Date === value.Date && patientCompare.ID === value.ID && patientCompare.Component === value.Component);
            });

            updatePatient.Result += value.Result;
        }
        else { 
            uniques.push(value);
        }
    });

}

因此，在我們的編輯中，您還需要綁定一個components : string[]; 反對組件。 其中必須包含["crea", "gluk", etc....]

並使用過濾器功能過濾掉您的數據。

Answer 2

我有

這是stackblitz： https ://angular-aqfdrs.stackblitz.io

我做了什么

我根據日期和要顯示的字段創建了一個動態數組數組：

public patArray: any[] = [];

this.pat[0].patients.forEach(el => {
      if(this.currentDateString == ""){
        this.currentDateString = el['date'];
        if(!this.skipAssign){
          this.patArray[this.idx] = [];
        }
      }

      if(this.currentDateString == el['date']){
        this.patArray[this.idx].push(el);
      } else {
        this.currentDateString = "";
        this.idx++;
        this.patArray[this.idx] = [];
        this.patArray[this.idx].push(el);
        this.skipAssign = true;
      }
    });

然后使用嵌套的ngFor進行一些技巧：

.flex-ctr{
  display: flex;
  width:100%;
  flex-direction: column;
}

.first{
  display: flex;
  flex-direction: row;
  width:100%;
  height:80px;
  border: 1px solid;
  margin-top: 5px;
}

.tbl{
  display: flex;
  flex-direction: row;
  width:75px;
  height:80px;
}

.table-things{
  display: flex;
  flex-direction: column;
  width:100%;
  font-size: 10px;
  border-right: 1px solid;
  text-align: center;
  align-content: center;
}

.bb{
  border-bottom: 1px solid;
  height:30%;
}

.ss{
  padding-top: 30px;
}

<div class="flex-ctr">
  <div class="first" *ngFor="let data of patArray">
    <div class="tbl" *ngFor="let single of data">
      <div class="table-things">
        <div class="bb">{{single.component}}</div>
        <div class="ss">{{single.result}}</div>
      </div>
    </div>
  </div>
</div>