*ngFor 嵌套 JSON 调用在 HTML 页面 Angular Ionic答案

【问题标题】：*ngFor Nested JSON call In HTML page Angular Ionic*ngFor 嵌套 JSON 调用在 HTML 页面 Angular Ionic
【发布时间】：2020-07-01 06:20:47
【问题描述】：

我正在使用离子段和嵌套 JSON。

现在我正在使用 ionic 使用 Angular 框架。

ionic 版本为 5。现在我无法在 html 文件中显示。两个页面都显示在下面。

{{item.tablist.name}} 没有给我没有 2 离子卡的数据。

数据.json

[
    {
      "title": "TravelTime",

      "tablist": [
        {
          "id": 1,
          "name": "TT 1 Average Travel Time",
          "current":54,
          "historicaldata":56,
          "twohr": 27.9,
          "yesterday": 28.9,
          "week": 30,
          "month": 42,
          "quater": 24,
          "Year": 36,
          "percent": 85
        },
        {
          "id": 2,
          "name": "TT 2",
          "current":54,
          "historicaldata":56,
          "twohr": 27.9,
          "yesterday": 28.9,
          "week": 30,
          "month": 42,
          "quater": 24,
          "Year": 36,
          "percent": 85
        }
      ]
    },
    {
      "title": "Speed",
      "tablist": [
        {
          "id": 1,
          "name": "SS 1 ",
          "current":54,
          "historicaldata":56,
          "twohr": 27.9,
          "yesterday": 28.9,
          "week": 30,
          "month": 42,
          "quater": 24,
          "Year": 36,
          "percent": 85
        },
        {
          "id": 1,
          "name": "SS 2 test data",
          "current":54,
          "historicaldata":56,
          "twohr": 27.9,
          "yesterday": 28.9,
          "week": 30,
          "month": 42,
          "quater": 24,
          "Year": 36,
          "percent": 85
    }
  ]
}

]

现在是html文件

<ion-segment color="primary" [(ngModel)]="prit">
  <ion-segment-button  *ngFor="let item of data" value="{{item.title}}">
    {{item.title}}
  </ion-segment-button>
</ion-segment>

<div *ngFor="let item of data" [ngSwitch]="prit">
 <ion-card *ngFor="let item of data" > 
  <ion-list *ngSwitchCase="item.title">
    <ion-item>{{item.tablist.name}}</ion-item>
  </ion-list></ion-card>
</div>

Ts 文件

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

@Component({
  selector: 'app-test-component',
  templateUrl: './test-component.component.html',
  styleUrls: ['./test-component.component.scss'],
})
export class TestComponentComponent implements OnInit {

  data:any;
  prit:string;
  constructor() {
    this.read_data();
  }
  read_data(){
    fetch('./assets/data.json').then(res => res.json())
    .then(json => {
      this.data = json;
    });
  }

  ngOnInit(){
    this.prit = "1";
  }
}

我使用 ionicframework 网站，所有代码都可以正常工作，但 wordking 不是从 json 调用数据。请帮我解决这个问题

【问题讨论】：

请分享您的组件代码。你如何加载 json 等。
@Eldar 我也添加了 TS 文件

标签： arrays json angular arraylist ionic5

【解决方案1】：

先取title。所以 ngFor 用于标题。

 <div *ngFor="let item of datas">
     <ion-item>
        {{item.datas}}
     </ion-item>
 </div>

第二次取tablist数据。所以把 ngFor 放在 1 号以下。

 <div *ngFor="let item of datas">
  <ion-item>
     {{item.datas}}
      <!--take tablist-->
     <ion-card *ngFor="let tablistData of item">
       <li>
           {{tablistData.name}}
       </li>
     </ion-card>
  </ion-item>

在第二个 ngFor 中使用 item 而不是 datas。

【讨论】：

【解决方案2】：

我不知道如何用 Angular 做，但它的逻辑非常简单。

首先，您创建一个循环以获取包含两个值的第一项前任： data[0] = {title: "TravelTime", tablist: Array(2)}

之后，为第二个数组（Tablist）创建另一个循环

数据[0]["tablist"][0] = 返回数组(1)

并像这样获取每个项目的值：

数据[0]["tablist"][0]["id"] = 1

希望你能理解

【讨论】：