イオン画像srcパース情報に基づいて

Question

私は解析アプリケーションを作っています。私はhttps://www.reddit.com/r/artificial/.jsonから情報を解析しています。私はアプリでコンテンツを表示することができます。私に迷惑をかけるのは、画像のないポストがいくつかあり、そこには画像がない国境があるということだけです。だから私がやろうとしているのは、reddit postの近くにイメージがないときに、 "empty one"（おそらくインターネットから）の代わりに他のイメージをロードすることです。私は* nfIfとng-switchで何かを試しましたが、何も働かなかった。ここでは、コードは次のようになります。

HTML：

<ion-header> 
     <ion-navbar> 
     <ion-title>Reddit news</ion-title> 
     </ion-navbar> 
    </ion-header> 

    <ion-content padding> 
     <ion-list> 
     <ion-item> 
      <ion-label fixed>Category</ion-label> 
      <ion-select (ionChange)="changeCategory()" [(ngModel)]="category" name="category"> 
       <ion-option value="artificial">Artificial inteligence</ion-option> 
       <ion-option value="TechNewsToday">Techonology</ion-option> 
       <ion-option value="gamernews">Gaming</ion-option> 
      </ion-select> 
     </ion-item> 
     </ion-list> 

     <ion-list> 
     <ion-item *ngFor = "let item of items" text-wrap> 
      <ion-thumbnail *ngIf="item.data.thumbnail" item-left> 
      <img ng-switch-default src="{{item.data.thumbnail}}"> 
      </ion-thumbnail> 
      <h2 class="wrap item-text-wrap">{{item.data.title}} </h2> 
      <p class="wrap item-text-wrap" style="word-wrap: break-word; word-break: break-all;"> 
      <ion-icon name="person" item-left>{{item.data.author}}</ion-icon> 
      <ion-icon name="thumbs-up">{{item.data.score}}</ion-icon>&nbsp;&nbsp; 
      <ion-icon name="chatboxes">{{item.data.num_comments}}</ion-icon>  
      </p> 
      <a ion-button block target="_blank" href="http://reddit.com/{{item.data.permalink}}">VIEW ON REDDIT</a> 
     </ion-item> 
     </ion-list> 

    </ion-content> 

活字体：

import { Component } from '@angular/core'; 
import { NavController, NavParams } from 'ionic-angular'; 
import {MyRedditApi} from '../../providers/my-reddit-api'; 

@Component({ 
selector: 'page-reddit', 
templateUrl: 'reddit.html', 
providers: [MyRedditApi] 
}) 

export class RedditPage { 
items: any; 
category:any; 
limit:any; 

constructor(public navCtrl: NavController, public navParams: NavParams, private redditProvider: MyRedditApi) {} 

ionViewDidLoad() { 
    this.getDefaults(); 
    this.getPosts(this.category, this.limit); 
} 

getDefaults(){ 
    this.category = 'artificial'; 
    this.limit = 30; 
} 

getPosts(category, limit){ 
    this.redditProvider.getPosts(category, limit).subscribe(response => { 
    this.items = response.data.children; 

    }); 
} 

changeCategory(){ 
    this.limit = 30; 
    this.getPosts(this.category, this.limit); 
} 

} 

API：

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class MyRedditApi { 
    http: any; 
    baseUrl: String; 

    constructor(http: Http) { 
    this.http = http; 
    this.baseUrl = "https://www.reddit.com/r"; 
    //console.log('Hello MyReddit Provider'); 
    } 

    getPosts(category, limit){ 
    console.log (this.baseUrl + '/' + category + '/.json?limit='+limit); 
    return this.http.get(this.baseUrl + '/' + category + '/.json?limit='+limit) 
    .map(res => res.json()); 
    } 

} 

Answer 1

あなたがして、コントローラに機能から画像のURLを返す試すことができます以下のように直接サムネイル値をバインドするのではなく、サムネイル値をチェックします。

<ion-thumbnail item-left> 
<img [src]="getThumbnailImage(item.data.title)"> 
</ion-thumbnail>