[英]Get error: Cannot find a differ supporting object '[object Object]' of type 'object' NgFor only supports binding to Iterables, such as Arrays
I am working on the Angular application with Strapi, and I am not able to get the output from Strapi.我正在使用 Strapi 开发 Angular 应用程序,但我无法从 Strapi 获得 output。
This is my HTML page for the application:这是我的 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>
This is the ts file:这是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$);
}
}
service.ts:服务.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);
}
}
I tried to change the ngFor
in the HTML file, but that is the error:我试图更改
ngFor
文件中的 ngFor,但这是错误:
Cannot find a differ supporting object '[object Object]' of type 'object' NgFor only supports binding to Iterables, such as Arrays
找不到不同的支持 object '[object Object]' of type 'object' NgFor 只支持绑定到 Iterables,例如 Arrays
I could not understand what was the error so I could not change anything.我不明白错误是什么,所以我无法更改任何内容。 Can anyone help me?
谁能帮我?
In Angular, a variable with the $
suffix represents an Observable .在 Angular 中,带有
$
后缀的变量表示一个 Observable 。 You should assign the Observable
returned from eventService.getEvents
method without the .subscribe
event.您应该在没有
.subscribe
事件的情况下分配从eventService.getEvents
方法返回的Observable
。
import { Observable } from 'rxjs';
events$: Observable<TourEvent[]>;
ngOnInit() {
this.events$ = this.eventService.getEvents();
}
While you need the AsyncPipe
in the view to subscribe to the events
Observable.虽然您需要视图中的
AsyncPipe
来订阅events
Observable。
<tr *ngFor="let event of events$ | async">
...
</tr>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.