错误错误：在 Angular 项目上找不到支持类型为“object”的 object“[object Object]”的差异

Question

所以，我试图从后端获取 json，但我没有这样做。 这是我的代码：

averomar.服务.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';

export interface Quartos {
  _id: string;
  Hotel: string;
  Quarto: string;
  Número: string;
  PreçoBaixa: string;
  PreçoAlta: string;
  Servicos: string;
}

@Injectable({
  providedIn: 'root'
})

export class AveromarService {
  baseURL = 'http://localhost:3055';

  constructor(private http: HttpClient) { }

  getRoomsAveroMar() {

    return this.http.get<Quartos[]>(this.baseURL+'/quartos/averomar')
      .pipe(
        retry(3), // retry a failed request up to 3 times
        catchError(this.handleError) // then handle the error
      );

  }

  private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      // A client-side or network error occurred. Handle it accordingly.
      console.error('An error occurred:', error.error.message);
    } else {
      // The backend returned an unsuccessful response code.
      // The response body may contain clues as to what went wrong,
      console.error(
        `Backend returned code ${error.status}, ` +
        `body was: ${error.error}`);
    }
    // return an observable with a user-facing error message
    return throwError(
      'Something bad happened; please try again later.');
  };
}

averomar.组件.ts

import { Component, OnInit, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Quartos, AveromarService } from '../averomar.service';

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

@Injectable()
export class AveromarComponent implements OnInit {

  quartos: Quartos[];

  servicosarr: string[];

  constructor(private AveromarService: AveromarService) { }

  showConfig() {
    this.AveromarService.getRoomsAveroMar()
      .subscribe(
        (data: Quartos[]) => {
          this.quartos = { ...data };
          console.log(this.quartos);
        }
      );
  }

  getServicos(quarto){
    this.servicosarr = quarto.Servicos.split(",");
  }

  public ngOnInit() {
    this.showConfig();
    console.log("Init done! ;)");
  }


}

在 html 上

  <div class="column leftborder" *ngIf="quartos">
<h2>Informações sobre os nossos Quartos:</h2>
<div class="row">
  <div class="column" *ngFor="let quarto of quartos">
    <h2>{{quarto.Quarto}}</h2>
    <li *ngFor="let servico of getServicos(quarto)">{{servico}}</li>
  </div>
</div>

后端返回的json是这样的：

[{"_id":"5ebf1383dec3c204c48457a3","Hotel":"A Ver o Mar","Quarto":"Standard","Número":"3","PreçoBaixa":"180","PreçoAlta":"270","Servicos":"Telefone,Wi-fi gratuito,Ar condicionado,Televisão LED,Canais por cabo,Mini-bar,Casa de banho privativa com telefone,Secador de cabelo,Espelho de maquilhagem,Produtos de higiene pessoal gratuitos,Fechadura eletrónica de segurança,Roupão e chinelos,Maquina de café"},{"_id":"5ebf1429ebf36e4e80a55d4a","Hotel":"A Ver o Mar","Quarto":"Suite","Número":"1","PreçoBaixa":"270","PreçoAlta":"350","Servicos":"Telefone,Wi-fi gratuito,Ar condicionado,Televisão LED,Canais por cabo,Cofre,Casa de banho privativa com telefone,Secador de cabelo,Espelho de maquilhagem,Produtos de higiene pessoal gratuitos,Fechadura eletrónica de segurança,Sala-de-estar,Roupão e chinelos,Maquina de café"}]

这是来自控制台的错误：

这是美化的 json：

我已经尝试了在这里找到的许多不同的东西，但没有解决问题。 我不确定是否应该将它作为一个数组来阅读，但这是我的第一个 angular 项目，所以我对这一切的工作原理有点困惑。

谢谢您的帮助！

Answer 1

此代码正在创建一个新的 object，因为您将响应数组“数据”分布在 {} this.quartos = {...data };

您必须像这样在 [ ] 内展开一个数组。 this.quartos = [...数据];

如果你想看到编译错误，试试这个。 this.quartos = {...data} 作为 Quartos[];

由于这是一个 http 服务请求，您无论如何都不需要传播它。 你可以这样做。 this.quartos = 数据；