我的离子列表中的 *ngFor 坏了 (ionic 5, Angular 9)

Question

试图从我的 db.json 文件中提取数据，然后将其填充到列表中。当我只是在控制台记录页面加载时的数据时它工作正常，但现在我收到此错误：

尝试区分“[object Object]”时出错。只允许数组和可迭代对象

我以为我使用的是 .ts 文件中的作业数组，但显然不是，代码如下：

相关html（作业。在双花括号中不会自动完成我界面中的任何内容）

 <ion-list inset="true">
    <ion-item *ngFor="let job of jobs"> {{job.type}} </ion-item>

搜索-jobs.page.ts

import { JobService } from './../../services/job.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-search-jobs',
  templateUrl: './search-jobs.page.html',
  styleUrls: ['./search-jobs.page.scss'],
  providers: [JobService]
})
export class SearchJobsPage implements OnInit {

    public jobs = [];
  constructor(private jobService: JobService) {

   }

  claim(){
    console.log("claimed");
  }

  ngOnInit() {
    this.jobService.getLocalData().subscribe(data => this.jobs = data); 




  }

}

job.service.ts

import { Observable } from 'rxjs';
import { Job } from './../models/job';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class JobService {
  private url: string = "/assets/data/db.json";
  constructor(private http: HttpClient) { }

  getLocalData(): Observable<Job[]> {
    return this.http.get<Job[]>(this.url);
  }
}

job.ts（我的界面）

    jobId: number;
    seekerId: number;
    providerId: number;
    type: string;
    city: string;
    address: string;
    estimate: number;
    duration: string;
    description: string; 
    completed: boolean;
}

Answer 1

我认为您从订阅中获得了 json 字符串对象。试着安慰它。如果是，则转换为 json 数组。

我的离子列表中的 *ngFor 坏了 (ionic 5, Angular 9)

My *ngFor in my ionic list is broken (ionic 5, Angular 9)

subscribe

ionic-framework

angular

angular-httpclient