在Angular使用HttpClient获取API中的数据时无法在浏览器中显示数据

Question

在Angular使用HttpClient获取API中的数据时无法在浏览器中显示数据

import { Component } from '@angular/core';
import { DataService } from './data.service';
import { FormsModule } from '@angular/forms';
import { BookData } from './BookData';
import {HttpClient} from "@angular/common/http";
@Component({
  selector: 'app-root',
  template: 'Hello! This is my Angular JS<Br><br> List of all books <input type="button" value="Get all books" (click)="getAllBooks()"><br><ul><li *ngFor = "let book of list">book_ID: {{book.book_ID}}</li></ul>',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'bookstore';
  
  public list:any[] = [];
  errorMessage:string="";
  
  constructor(public http:HttpClient){
  
  }
  
   getAllBooks(){
   var api = "http://localhost:3060/api/concert/";
    this.http.get(api).subscribe((response:any) =>{
    console.log(response);
    this.list = response.result;
    });
  }
}

点击按钮后无法显示出列表但在后台显示已经提取出数据了

我的解答思路和尝试过的方法

请问怎么让数据显示在列表里

Answer 1

console.log(response);
this.list = response.result;

这个response就是你的列表，不需要result