angular - IONIC 5 找不到类型为“object”的不同支持对象“[object Object]”。NgFor 仅支持绑定到 Iterables，例如 Arrays

Question

我在尝试从我的 ionic 5 应用程序的 API 获取数据时遇到此错误。我尝试删除所有阵列但没有工作。有人可以帮忙吗？

这是我的文件：

类型.ts

export interface Activity {
    area_metadata: Areametadatum[];
    items: Item[];
    api_info: Apiinfo;
}

export interface Apiinfo {
    status: string;
}

export interface Item {
    update_timestamp: string;
    timestamp: string;
    valid_period: Validperiod;
    forecasts: Forecast[];
}

export interface Forecast {
    area: string;
    forecast: string;
}

export interface Validperiod {
    start: string;
    end: string;
}

export interface Areametadatum {
    name: string;
    label_location: Labellocation;
}

export interface Labellocation {
    latitude: number;
    longitude: number;
}

api.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Activity } from '../types';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private _httpClient: HttpClient) {}

  getAllActivities(): Observable<Activity> {
    return this._httpClient.get<Activity>(API);
  }
}

const API = "https://api.data.gov.sg/v1/environment/2-hour-weather-forecast";

主页.ts

import { Component, OnInit } from '@angular/core';
import { AuthenticationService } from "../authentication/authentication-service";
import { Platform } from '@ionic/angular';
import { Router } from '@angular/router';
import { FormBuilder } from '@angular/forms';
import { Observable } from 'rxjs';
import { Activity } from '../types';
import { ApiService } from '../services/api.service';


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

  activityList: Observable<Activity>;

  constructor(apiService: ApiService) {
    this.activityList = apiService.getAllActivities();
  }

  ngOnInit() {
  }
}

主页.html

<ion-header>
  <ion-toolbar>
    <ion-title>Home</ion-title>
    <ion-buttons slot="start">
      <ion-menu-button menu="main-menu"></ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-card button *ngFor="let activity of activityList">
          <ion-card-header>
            <ion-card-title>{{activity.items}}</ion-card-title>
          </ion-card-header>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

标签： angularionic-framework

Answer 1

选项 1：订阅

getAllActivities()函数返回一个可观察的。您需要订阅它并在订阅中分配局部变量。

export class HomePage implements OnInit {

  activityList = [];        // <-- type should be array not `observable`

  constructor(apiService: ApiService) {
    apiService.getAllActivities().subscribe(    // <-- subscribe here
      response => {
        this.activityList = response;
      },
      error => {
        // always good practice to handle error in HTTP observables
      }
    );
  }

  ngOnInit() {
  }
}

选项2：async管道

或者，您可以保留activityListas anobservable并将async管道包含在模板中。

但是将可观察类型更改为any. 它实际上是 Angular HTTP 可观察的。

控制器

export class HomePage implements OnInit {
  activityList: Observable<any>;      // <-- change the type to `any`

  constructor(apiService: ApiService) {
    this.activityList = apiService.getAllActivities();
  }

  ngOnInit() {
  }
}

模板

<ion-card button *ngFor="let activity of activityList | async">
  <ion-card-header>
    <ion-card-title>{{activity?.items}}</ion-card-title>
  </ion-card-header>
</ion-card>