Блог

Я новичок в Ionic и пытаюсь перенести сложные данные Json в свой html.(Где Ionic пригодится).

Что я подразумеваю под «сложными» данными Json, так это Json, подобные этому:

 {
  "Key: "
     [
      {
       "Key: " "Value",
       "Key: " "Value"
      },
      {
       "Key: " "Value",
       "Key: " "Value"
      }
     ]
}
  

Проблема здесь для меня в первом ключе.
Я видел несколько примеров для форматов Json без этого первого ключа, Примеры:
https://www.youtube.com/watch?v=imaTBx4jbwY

Что у меня есть сейчас, так это:

Мой файл .ts:

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

import{HttpClient} from "@angular/common/http";
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
  BugList: Object;

  constructor(public http: HttpClient){
    this.http.get('jsonurl').pipe()
    .subscribe(res => this.BugList = res;), 
    (err) => {
      alert("failed loading data");
    });
  }
}
  

и для моего html:

 <ion-content>
  <ion-card *ngFor="let bug of BugList| async">
    <ion-card-header>
      <ion-card-subtitle>{{bug.Bugs[1].Title}}</ion-card-subtitle>
      <ion-card-title></ion-card-title>
    </ion-card-header>
  </ion-card>
</ion-content>
  

это выдает мне следующую ошибку:

ОШИБКА Ошибка: InvalidPipeArgument: ‘[object object]’ для канала ‘AsyncPipe’ Что означает, что я могу использовать аргумент * ngFor только для массивов, а не для сложных объектов Json, верно?

Я также видел другой пример:https://www.youtube.com/watch?v=TD1rKSuC3Zk

он попробовал это следующим образом:

 this.http.get('https://randomuser.me/api/?results=10')
.map(res => res.json())
.subscribe(res => {
  this.users = res.results;
}, (err) => {
  alert("failed loading json data");
});
}
  

это привело меня в том направлении, в котором я сейчас. Я заменил функцию .map на .pipe в моем файле .ts, потому что .map устарел. Теперь у меня ошибка, в которой говорится, что свойство ‘results’ не существует для типа ‘Object’

Главный вопрос: я действительно борюсь с этим дополнительным ключом, без него было бы не так сложно. есть ли способ, которым я могу сделать это динамично, используя показанные методы?