報錯：找不到不同的支持 object '[object Object]' of type 'object' NgFor 只支持綁定到 Iterables，例如 Arrays

Question

我正在使用 Strapi 開發 Angular 應用程序，但我無法從 Strapi 獲得 output。

這是我的 HTML 申請頁面：

<h1>Tour Events</h1>
<table *ngIf="events$ ">
    <tr>
        <th>Date</th>
        <th>Venue</th>
        <th>City</th>
        <th>Time</th>
        <th>Tickets</th>
    </tr>
    <tr *ngFor="let event of events$">
        <td>{{event.date | date: 'fullDate'}}</td>
        <td>{{event.venue }}</td>
        <td>
            <span *ngIf="event.region">{{event.city | titlecase}}, {{event.region | uppercase}}              ({{event.country |
                uppercase}})</span>
            <span *ngIf="!event.region">{{event.city | titlecase}} ({{event.country | uppercase}})</span>
        </td>
        <td>{{event.date | date: 'shortTime'}}</td>
        <td><a href="{{event.ticketsLink}}">Tickets</a></td>
    </tr>
</table>

這是ts文件：

import { Component, OnInit } from '@angular/core';
import { TourEventsService } from 'src/app/core/services/tour-events.service';
@Component({
  selector: 'app-tour-events',
  templateUrl: './tour-events.component.html',
  styleUrls: ['./tour-events.component.css']
})
export class TourEventsComponent implements OnInit{
  events$: any;
  constructor(private eventService: TourEventsService) { }
  ngOnInit(){
    this.events$ = this.eventService.getEvents().subscribe(()=>this.events$);


  }

}

服務.ts：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';
import { TourEvent } from '../models/tour-event';

@Injectable({
  providedIn: 'root'
})
export class TourEventsService {
  private eventsPath = 'api/tour-events';

  constructor(private http: HttpClient) { }

  getEvents(){
    return this.http.get<TourEvent[]>(environment.apiUrl+this.eventsPath);
  }
}

我試圖更改ngFor文件中的 ngFor，但這是錯誤：

找不到不同的支持 object '[object Object]' of type 'object' NgFor 只支持綁定到 Iterables，例如 Arrays

我不明白錯誤是什么，所以我無法更改任何內容。 誰能幫我？

Answer 1

在 Angular 中，帶有$后綴的變量表示一個 Observable 。 您應該在沒有.subscribe事件的情況下分配從eventService.getEvents方法返回的Observable 。

import { Observable } from 'rxjs';

events$: Observable<TourEvent[]>;

ngOnInit() {
  this.events$ = this.eventService.getEvents();
}

雖然您需要視圖中的AsyncPipe來訂閱events Observable。

<tr *ngFor="let event of events$ | async">
  ...
</tr>

演示 @ StackBlitz