arrays - 在 Angular 上执行 GET 请求时出现此错误 : Cannot find a differ supporting object '[object Object]

Question

tab1.page.ts 应通过执行 GET 请求返回地点列表。 Laravel 返回一个 JSON 文件。

tab1.page.ts

export class Tab1Page implements OnInit {

  places$: Place[];

  constructor(
    private placesService: PlacesService
  ) {}

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

}

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

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');
  }
}

我不断在控制台中收到错误:找不到“object”类型的不同支持对象“[object Object]”。 NgFor 仅支持绑定(bind)到 Iterables，例如数组。

添加了每个请求的 JSON 结构。

{
    "places": [
        {
            "id": 1,
            "place_id": "coktail",
            "approved": "Review",
            "requested_by_staff": "yes",
            "activities_associated": "get work done",
            "address": null,
            "photo_places": null,
            "id_owner_user": null,
            "created_at": "2021-01-02T14:39:09.000000Z",
            "updated_at": "2021-01-02T14:39:09.000000Z"
        },
        {
            "id": 2,
            "place_id": "librino",
            "approved": "Review",
            "requested_by_staff": "yes",
            "activities_associated": "get work done",
            "address": null,
            "photo_places": null,
            "id_owner_user": null,
            "created_at": "2021-01-02T14:45:35.000000Z",
            "updated_at": "2021-01-02T14:45:35.000000Z"
        },
        {
            "id": 3,
            "place_id": "librino2",
            "approved": "Review",
            "requested_by_staff": "yes",
            "activities_associated": "get work done",
            "address": null,
            "photo_places": null,
            "id_owner_user": null,
            "created_at": "2021-01-02T14:46:19.000000Z",
            "updated_at": "2021-01-02T14:46:19.000000Z"
        }
]
}

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>

我做错了什么？

Answer 1

正如错误明确指出的那样，您正在尝试迭代一个对象，但 ngFor 需要一个数组来迭代。由于 places 包含对象 places$ 中的数组信息，请进行以下更改:

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

此外，建议仅使用 $ 来指示可观察值。在您的情况下，它是一个数组，因此最佳实践是将 places$ 重命名为 places。