IONIC 3属性'..'在'TheMovieDbApiConfigImage []'类型中不存在

Question

我遇到了一个问题，因为我设法检索值并显示在HTML部分上，但是我想在typescript部分中检索这些值以创建一个URL并将其保存在变量中，在中“Prez.ts”即可。 这是我的串联：

urlJaquette：string = this.configMovie.images。 secure_base_url + this.configMovie.images。 backdrop_sizes [0] + this.choiceMovie.poster_path;

我对“this.configMovie.images。”之后的单词有错误。串联中的粗体部分有错误。此错误消息是“属性”这个词后面的this.configMovie.images。类型'TheMovieDbApiConfigImage []'“

上不存在

提供者：ThemoviedbServicesProvider

// Core companents

import { Http } from '@angular/http';
import { Injectable } from '@angular/core';

// RxJS

import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';

// Models //
import {TheMovieDbApiSearch} from '../models/search/themoviedbapi-search-model';
import {TheMovieDbApiConfig} from '../models/config/themoviedbapi-config-model';
import {TheMovieDbApiDescription} from '../models/description/themoviedbapi-desciption-model';

/*
  Generated class for the ThemoviesdbServicesProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/

@Injectable()
export class TheMoviedbServicesProvider {

  private baseUrl: string = 'https://api.themoviedb.org/3/';
  private apiConf : string = 'configuration?api_key=';
  private apiSearch : string = 'search/movie?api_key=';

  private apiKey: string = 'apiKey';

    constructor(private http: Http) {
  }

  public getConfig(): Promise<TheMovieDbApiConfig> {

    const url = `${this.baseUrl}${this.apiConf}${this.apiKey}`;

    return this.http.get(url)
    .toPromise()
    .then(response => response.json() as TheMovieDbApiConfig)
    .catch(error => console.log('Une erreur est survenue : ') + error)

  }

  public getMovies(arg, arg1, arg2, arg3): Promise<TheMovieDbApiSearch> {

    const url = `${this.baseUrl}${this.apiSearch}${this.apiKey}&language=${arg}&query=${arg1}&page=${arg2}&include_adult=${arg3}`;

    return this.http.get(url)
    .toPromise()
    .then(response => response.json() as TheMovieDbApiSearch)
    .catch(error => console.log('Une erreur est survenue : ') + error)

  }

  public getChoice(arg, arg1): Promise<TheMovieDbApiDescription> {

    const url = `${this.baseUrl}movie/${arg}?api_key=${this.apiKey}&language=${arg1}`;

    return this.http.get(url)
    .toPromise()
    .then(response => response.json() as TheMovieDbApiDescription)
    .catch(error => console.log('Une erreur est survenue : ') + error)

  }


}

Prez.ts

import { Component } from '@angular/core';
import { NavController, NavParams, IonicPage } from 'ionic-angular';

// Providers //
import {ThemoviedbServicesProvider} from '../../providers/themoviedb-services';

// Models //
import {TheMovieDbApiConfig} from '../../models/config/themoviedbapi-config-model';
import {TheMovieDbApiDescription} from '../../models/description/themoviedbapi-desciption-model';

/**
 * Generated class for the PrezPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage({
    defaultHistory: ['FilmPage']
})
@Component({
  selector: 'page-prez',
  templateUrl: 'prez.html',
})
export class PrezPage {

    configMovie : TheMovieDbApiConfig = new TheMovieDbApiConfig();
    choiceMovie : TheMovieDbApiDescription = new TheMovieDbApiDescription();
    id: number;
    langue: string;
    urlJaquette: string = this.configMovie.images.secure_base_url + this.configMovie.images.backdrop_sizes[0] + this.choiceMovie.poster_path;
    manuJaquette: string;
    textValue: string;

  constructor(public navCtrl: NavController, public navParams: NavParams, private themoviedbServicesProvider: ThemoviedbServicesProvider) {
    this.ionViewDidLoad();
    this.id = this.navParams.get('id');
      this.langue = this.navParams.get('langue');
    console.log(this.id);

    this.resultGetChoice(this.id, this.langue);
  }

  ionViewDidLoad() {
    this.themoviedbServicesProvider.getConfig()
        .then(configMovieFetched => {
        this.configMovie = configMovieFetched;
    })

  }

  resultGetChoice(arg, arg1) {
      this.themoviedbServicesProvider.getChoice(arg, arg1)
        .then(choiceMovieFetched => {
                this.choiceMovie = choiceMovieFetched;
                console.log(this.choiceMovie);
            })
  }

}

这是模型中的代码

import {TheMovieDbApiConfigImage} from './themoviedbapi-config-image-model';
import {TheMovieDbApiChangeKeys} from './themoviedbapi-config-change-key-model';

export class TheMovieDbApiConfig {
    change_keys: TheMovieDbApiChangeKeys[];
    images: TheMovieDbApiConfigImage[];
}

和

import  {BackdropSizes} from './backdropsizes';
import  {LogoSizes} from './logosizes';
import  {PosteSizes} from './postesizes';
import  {ProfileSizes} from './profilesizes';
import  {StillSizes} from './stillsizes';

export class TheMovieDbApiConfigImage {
    backdrop_sizes: BackdropSizes[];
    base_url: string;
    logo_sizes: LogoSizes[];    
    poster_sizes: PosteSizes[];
    profile_sizes: ProfileSizes[];
    secure_base_url: string;
    still_sizes: StillSizes[];
}

事先谢谢

Answer 1

images是一个类型为TheMovieDbApiConfigImage的数组。要调用secure_base_url和backdrop_sizes [0]，您需要像这样引用数组的索引

this.urlJaquette = this.configMovie.images[0].secure_base_url + this.configMovie.images[0].backdrop_sizes[0] + this.choiceMovie.poster_path

一旦你输入了this.configMovie.images的索引，你就可以访问这两个变量。

Answer 2

我发现问题来自哪里!!这来自生命周期序列，变量

this.urlJaquette = this.configMovie['images']['secure_base_url'] + this.configMovie['images']['backdrop_sizes'][0] + this.choiceMovie['poster_path']

在接收信息之前执行，为此我添加了一个附加到带

的功能的按钮

console.log (this.configMovie['images'] ['secure_base_url'] + this.configMovie['images']['backdrop_sizes'][0] + this.choiceMovie['poster_path'])

在这里，我收到了在我的控制台中连接的变量!!

现在我必须找到正确的序列，但我没有找到该做什么，我尝试了离子文档中描述的lifecycle-events和角度doc中描述的lifecycle-hooks。你有什么想法吗？