javascript - 找不到“object”类型的不同支持对象“[object Object]”。NgFor 只支持绑定到 Iterables 如 Arrays 错误

Question

后端（Spring Boot，REST（Spring Data Rest，Spring Data JPA）它只发生在 JPA 上，没有它可以完美运行，但是要编写更多代码）。

我尝试了所有剩余的响应，但我没有得到确切的解决方案。

后端 API

New File
pizzatest.model.ts
export class Pizzas{

    firstName: string;
    description: string;
}

API BELOW   

_embedded   
pizzas  
0   
firstName   "Pizza Margarita"
description "Ingredients of Margarita"
_links  
self    
href    "http://localhost:8080/pizzas/1"
pizza   
href    "http://localhost:8080/pizzas/1"
1   
firstName   "Detroit Pizza"
description "Ingredients of Detroit Pizza"
_links  
self    
href    "http://localhost:8080/pizzas/2"
pizza   
href    "http://localhost:8080/pizzas/2"
2   
firstName   "Greek Pizza"
description "Ingredients of Greek Pizza"
_links  
self    
href    "http://localhost:8080/pizzas/3"
pizza   
href    "http://localhost:8080/pizzas/3"
3   
firstName   "Sicilian Pizza"
description "Ingredients of Sicilian Pizza"
_links  
self    
href    "http://localhost:8080/pizzas/4"
pizza   
href    "http://localhost:8080/pizzas/4"
4   
firstName   "Chicago Pizza"
description "Ingredients of Chicago Pizza"
_links  
self    
href    "http://localhost:8080/pizzas/5"
pizza   
href    "http://localhost:8080/pizzas/5"
_links  
self    
href    "http://localhost:8080/pizzas{?page,size,sort}"
templated   true
profile 
href    "http://localhost:8080/profile/pizzas"
page    
size    20
totalElements   5
totalPages  1
number  0

服务

import { Injectable } from '@angular/core';
import{HttpClient} from '@angular/common/http';


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

readonly rootUrl = 'http://localhost:8080/'

  constructor(private http: HttpClient) { }

getPizzas(){
  return this.http.get(this.rootUrl + '/pizzas');
}}

打字稿

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { PizzatestService } from './pizzatest.service';
import {Pizzas} from './pizzatest.model'; 


@Component({
  selector: 'app-pizzatest',
  templateUrl: './pizzatest.component.html',
  styleUrls: ['./pizzatest.component.css']
})
export class PizzatestComponent implements OnInit {

pizzas : Pizzas[]


  constructor(private pizzaTestService: PizzatestService) { }

  ngOnInit() {
this.pizzaTestService.getPizzas().subscribe((data: any) => {
  console.log('from service', data)
  this.pizzas = data;
})
  }
}

HTML

<div *ngFor="let pizza of pizzas">
        <ul> 
          <li> {{pizza.firstName}}</li>
          <li> {{pizza.description}}</li>
        </ul>
        </div>

标签： javascripthtmlangulartypescriptangular7

Answer 1

每次使用 HttpClient 返回的数据都是 Json 对象格式。例如：

这是您可以尝试的示例代码。

您可以尝试在 service.ts 中映射您的数据：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, Subject, ReplaySubject, from, of, range } from 'rxjs';
import 'rxjs/add/operator/map';

@Injectable()
  export class DataloadService {

    constructor(private http: HttpClient) { }

    LoadData(): Observable<any> {
      return this.http.get('https://jsonplaceholder.typicode.com/users')
        .map(this.extractData)
    }

    private extractData(res: Response) {
      let body = res;
      return body;
    }

  }

这是 app.component.ts：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {DataloadService} from './dataload.service';
import { Observable, Subject, ReplaySubject, from, of, range } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent {

  dataFromServer: Observable<any>;

  constructor(private load: DataloadService) {}

  getDataServer() {
    let obj = this.load.LoadData();
    obj.subscribe(data => {this.dataFromServer = data;
    console.log("data:", data);
    })
  };

  ngOnInit() {this.getDataServer();} 

}

html文件：

<h2>My Awesome Table:</h2>

<table *ngIf="dataFromServer">

  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Username</th>
    <th>Email</th>
  </tr>

  <tr *ngFor="let data of dataFromServer">
    <td>{{data.id}}</td>
    <td>{{data.name}}</td> 
    <td>{{data.username}}</td>
    <td>{{data.email}}</td> 
  </tr>

</table>

希望这对您的问题有所帮助。