以角度显示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
]

更新：我将此代码添加到我的患者中。

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和日期的所有组件和结果，它应如下所示：

table

能给我一些指导吗？谢谢！

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模板

病人内组件.html（编辑-将“组件”列表绑定到名为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。 [EDIT]筛选我们的患者结果

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

我有。

这里是堆叠闪电战：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>