无法循环在angular6中的对象数组

Question

我正在尝试从omdbapi获取电影数据，但是我无法在html中打印此值

.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private _httpClient: HttpClient) {}
  results: any = [];
  getMovies(title) {
    `enter code here`
    this._httpClient.get("http://www.omdbapi.com/?apikey=d5dc2a5a&s=" + title)
      .subscribe((data) => {
        this.results = data;
        //this.results.Search;
        console.log(this.results)
      })
  }
}

控制台值

Answer 1

您可能在*ngFor的模板中使用results。但是由于您将data分配给results且data是一个对象，因此*ngFor假定了一个迭代数据结构，这会产生错误。

从屏幕快照中可以看到，Search上有一个data数组。

将this.results = data;更改为this.results = data.Search;

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

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

  constructor(private _httpClient: HttpClient) {}

  results: any = [];

  getMovies(title) {
    this._httpClient.get("https://www.omdbapi.com/?apikey=157f9eb7&s=" + title)
      .subscribe((data: any) => {
        this.results = data.Search;
        console.log(this.results);
      })
  }

  ngOnInit() {
    this.getMovies('The Dark Knight');
  }

}

这是您推荐的Sample StackBlitz。

Answer 2

您可以使用keyvalue管道来实现此目标，如下所示：

<div *ngFor="let item of results | keyvalue">
   <b>{{item.key}}</b> : <b>{{item.value}}</b>
</div>

Answer 3

您在响应中得到一个对象。您需要在* ngFor循环中使用？运算符，以获取用于异步http服务的数组。

<ul>
   <li *ngFor="let result of results?.Search">{{result.Title }}</li>
</ul>

，您可以这样显示totalResults：

<span>Total: {{results?.totalResults}}</span>