Question

所以我正在进行解析应用程序。我正在解析来自https://www.reddit.com/r/artificial/.json的信息。我可以在应用中显示内容。只有困扰我的是有些帖子没有图像，然后我得到没有图像的边框。所以我想要做的是在reddit post附近没有图像的情况下加载一些其他图像而不是“空的”（也许来自互联网）。我用* 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

您可以尝试通过检查缩略图值从控制器中的函数返回图像网址，而不是直接绑定缩略图值，如下所示。

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

基于解析信息的离子图像src

1 个答案: