Вложенный массив объектов в объектах - Angular 2

Question

Вложенный массив объектов в объектах - Angular 2

0

Я использую Angular 2 и JSONP для получения значения из api. Api возвращает объект (вложенные объекты). Ниже приведен код, который я пытаюсь использовать.

Данные

{  
 "adult":false,
 "backdrop_path":"/eIOTsGg9FCVrBc4r2nXaV61JF4F.jpg",
 "belongs_to_collection":null,
 "budget":175000000,
 "genres":[  
  {  
      "id":12,
      "name":"Adventure"
  },
  {  
     "id":18,
     "name":"Drama"
  },
  {  
     "id":14,
     "name":"Fantasy"
  }
 ],
 "poster_path":"/vOipe2myi26UDwP978hsYOrnUWC.jpg",
}

Service.ts

fetchData(){
  return this.jsonp.get('https://api.themoviedb.org/3/movie/278927?api_key=fd35dcdcfbba840ef2f9ea42c5c55869&callback=JSONP_CALLBACK').map(
  (res) => res.json()
);
}

component.ts

export class MovieComponent implements OnInit {

 movies = Object;
 constructor(private dataService: DataService) { }

 ngOnInit() {
   this.dataService.fetchData().subscribe(
   (data) => this.movies = data
 );  
 }
}

Шаблон HTML

{{movies.budget}}    //This is working
{{movies.genres[0].id}}    //This is not working

В шаблоне HTML я пытался использовать Elvis Operator, но это не возвращает никакой ценности. Журнал консоли показывает правильные данные как один объект. Как получить идентификатор и имя разных жанров?

{{movies?.genres?.id}}

не работает, даже после предоставления ему индекса.

Riya 17 сен. 2016, в 02:28

Источник

Теги:

angular

angularjs

http

jsonp

1 ответ

Ещё вопросы

mxii · Accepted Answer · 2016-09-17T06-41-00.000Z

Он работает со знанием индекса! Смотрите мой плункер в качестве демонстрации: https://plnkr.co/edit/vI9azM3JkytZ51SifNUa?p=preview

Но индекс должен быть там, поэтому сначала проверьте его с помощью *ngIf или используйте *ngFor для итерации всех возможных элементов.

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: '
    <div>
      <h2 *ngIf="names && names.length">Hello {{names[0]}}</h2>

      <h2 *ngFor="let n of names">Hi {{n}}</h2>
    </div>
  ',
})
export class App {
  constructor() {
    this.names = [];

    setTimeout(() => this.names = ['Angular2', 'Name2', 'name3'], 3000);
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Ну, что ж, спасибо. Я смог решить ее на основе вывода консоли и подсказки из вашего ответа. Имя объекта отличалось от того, что я использовал.