angular - HTTP响应以角度打印为[object Object]，[object Object]

Question

这是我的 price.service.ts

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

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

  constructor(private http: HttpClient) { }

  getProduct(): Observable<any> {
   return this.http.get('http://localhost:8080/api/v1/products');
  }
}

这是 price-list.component.ts

import { Component, OnInit } from '@angular/core';
import {FormControl} from '@angular/forms';
import { PriceService } from './price.service';

@Component({
  selector: 'app-price-list',
  templateUrl: './price-list.component.html',
  styleUrls: ['./price-list.component.css']
})
export class PriceListComponent implements OnInit {
  disableSelect = new FormControl(false);
  selectedValue :any
  sessions: any=[]
  constructor(private priceService: PriceService) { }

  ngOnInit(): void {

    this.priceService.getProduct().subscribe((data: any) => {
    this.sessions = Object.values(data);

   });
  }
}

我尝试在我的 price-list.component.html 中打印响应，如下所示

{{会话}}

但它打印在下面

[对象对象]，[对象对象]

这是我的邮递员输出

[ {“id”：8，“name”：“企鹅耳朵”，“cartonPrice”：175，“unitPrice”：9.0，“unitForCarton”：20 }，{“id”：9，“name”：“企鹅-earsghhc”，“cartonPrice”：175，“unitPrice”：9.0，“unitForCarton”：20 }]

如何打印实际数据

标签： angularhttp

Answer 1

假设您希望将其显示为 html ul 元素。然后，您可以按以下方式进行：

<ul>
  <ng-container *ngFor="let sessionItem of sessions">
    <li *ngFor="let keyVal of sessionItem | keyvalue"> {{ keyVal.key }}: {{ keyVal.value }}</li>
  </ng-container>
</ul>