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

Question

So, I'm trying to get a json from my backend, but I'm failing to do so. This is my code:

averomar.services.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.component.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! ;)");
  }


}

and on the 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>

The json that the backend returns is like this:

[{"_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é"}]

This is the error from the console:

And this is the json pretified:

I already tried many different things that I found here, but nothing solved the issue. I'm not sure if I should read it as a array to start with, but it's my first angular project, so I'm a bit confused on how this all works.

Thank you for your help!

Answer 1

This code is creating a new object because you spread the response array 'data' inside the { } this.quartos = {...data };

You must spread an array inside [ ] like this. this.quartos = [...data ];

If you want to see a compile error try this. this.quartos = {...data } as Quartos[];

Since this is an http service request you don't need to spread it anyway. You could do this instead. this.quartos = data;