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

Question

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

现在我使用 angular 框架来使用 ionic。

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

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

data.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 的数据。请帮我解决这个问题

Answer 1

我不知道在angular中该怎么做，但它的逻辑非常简单。

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

之后，您为第二个数组 (Tablist) 创建另一个循环

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

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

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

希望你明白

Answer 2

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

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

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

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

In second ngFor take item instead of datas.

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

*ngFor Nested JSON call In HTML page Angular Ionic

arrays

json

angular

arraylist

ionic5