Arrays 在Angular上执行GET请求时出现此错误：找不到不同的支持对象'；[对象]

tab1.page.ts应该通过执行GET请求返回位置列表。Laravel正在返回一个JSON文件

表1.page.ts

export class Tab1Page implements OnInit {

  places$: Place[];

  constructor(
    private placesService: PlacesService
  ) {}

  ngOnInit() {
    return this.placesService.getPlaces()
    .subscribe(data => this.places$ = data);
  }

}

import { HttpClient } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';
import { environment } from 'src/environments/environment';
import { Router } from '@angular/router';
import { Place } from '../models/place.model';

@Injectable({
  providedIn: 'root'
})
export class PlacesService {
constructor(private http: HttpClient, private router: Router) { 
   }
getPlaces () {
    return this.http.get<Place[]>(environment.getBaseAddress() + 'places/get');
  }
}

这是我用来获取位置列表的服务。 places.service.ts

export class Tab1Page implements OnInit {

  places$: Place[];

  constructor(
    private placesService: PlacesService
  ) {}

  ngOnInit() {
    return this.placesService.getPlaces()
    .subscribe(data => this.places$ = data);
  }

}

import { HttpClient } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';
import { environment } from 'src/environments/environment';
import { Router } from '@angular/router';
import { Place } from '../models/place.model';

@Injectable({
  providedIn: 'root'
})
export class PlacesService {
constructor(private http: HttpClient, private router: Router) { 
   }
getPlaces () {
    return this.http.get<Place[]>(environment.getBaseAddress() + 'places/get');
  }
}

Usercontroller.php

public function getPlaces(){
        $places =  Place::all();
        if ($places)
            return response()->json(['places'=>$places], 200);      
        else
            return response()->json("places not found", 500);
    }

tab1.page.html

<div *ngFor='let place of places$'>
    <ion-grid>
      <ion-row>
          <ion-col>
            <ion-card routerLink="/place-details" routerDirection="forward" style="background-image: url('https://oecdenvironmentfocusblog.files.wordpress.com/2020/06/wed-blog-shutterstock_1703194387_low_nwm.jpg?w=640');height: 150px;">
              <ion-grid>
                <ion-row>
                  <ion-col>
                    <ion-badge item-start>Type of activity {{ place.place_id }} </ion-badge>
                  </ion-col>
                </ion-row>
              </ion-grid>
              <ion-grid style="padding-bottom:0px;">
                <ion-row>
                  <ion-col>
                      <ion-card-title>Location {{ place.activities_associated }}</ion-card-title>
                  </ion-col>
                </ion-row>
              </ion-grid>
            </ion-card>
          </ion-col>
      </ion-row>
    </ion-grid>
  </div>

活动类型{place.place_id}
位置{place.activities_associated}

---

我做错了什么？

错误清楚地表明，您试图迭代对象，但ngFor需要一个数组来迭代。进行以下更改，因为

places

包含对象

places$

中的数组信息：

<div *ngFor='let place of places$?.places'>
   <!-- rest of the code -->
<div>

---

此外，建议使用

$

仅表示可观察到的。在您的例子中，它是一个数组，因此将

places$

重命名为

places

是最佳做法。您可以将json结构与用于迭代的模板代码一起共享吗？似乎您正在尝试迭代对象而不是数组。谢谢您的回答。我已经更新了json结构。您还需要共享用于迭代的模板代码。它破坏了模板。你是说后端用于获取数据的代码？不是。你可能正在使用json数据对组件的.html进行迭代？谢谢Nicholas！这已经清除了错误！非常感谢你的帮助。我会听从你的建议。很乐意帮忙。干杯