Невозможно зациклить массив объектов в angular6 - PullRequest
Новая
       6

Невозможно зациклить массив объектов в angular6

0 голосов
/ 18 сентября 2018

Я пытаюсь получить данные фильма из 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)
      })
  }
}

Значение консоли

issue screenshot

Ответы [ 3 ]

0 голосов
/ 18 сентября 2018

Вы можете достичь этого, используя keyvalue трубу, как показано ниже: 

<div *ngFor="let item of results | keyvalue">
   <b>{{item.key}}</b> : <b>{{item.value}}</b>
</div>
0 голосов
/ 18 сентября 2018

Вы получаете объект в своем ответе.Вам нужно использовать оператор ? в цикле * ngFor, чтобы получить массив для асинхронной службы http. 

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

, и вы можете отобразить totalResults следующим образом: 

<span>Total: {{results?.totalResults}}</span>
0 голосов
/ 18 сентября 2018

Вы, вероятно, используете *ngFor в своем шаблоне на results. Но поскольку вы присваиваете data results, а data - объекту, он выдает ошибку, поскольку *ngFor предполагает итеративную структуру данных.

Как видно из скриншота, на вашем data.

есть массив Search.

Изменить 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');
  }

}

Вот Образец StackBlitz для вашей ссылки.

...