javascript - 获取 Rss feed ionic 2 时出现问题

标签 javascript html angularjs ionic-framework rss

我在尝试使用 Ionic Framework 2 解析简单的 rss feed 时遇到了一些问题。当我运行代码时,我没有获得任何 feed 数据。 你能帮我吗?

rss-service.ts

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

@Injectable()
export class RssService {

    constructor(public http: Http) {
        this.http = http;
    }

    load() {

        return Observable.create(s => {

        this.http.get('https://query.yahooapis.com/v1/public/yql?q=select%20title%2Clink%2Cdescription%20from%20rss%20where%20url%3D%22http%3A%2F%2Ffeeds.feedburner.com%2Fraymondcamdensblog%3Fformat%3Dxml%22&format=json&diagnostics=true&callback=').subscribe(res => {
            console.log('in sub');
            console.dir(s);
           var result = res.json().query.results.item;
            result.forEach(i=>s.next(i));
            s.complete();

        });

      });
 }
}

home.html - home.ts

<ion-header>
    <ion-navbar color="primary">
        <ion-title text-center>
            App Name
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-list>
        <ion-list inset>
            <ion-item *ngFor="let entry of entries" (click)="openPage(entry)">{{entry.title}}</ion-item>
    </ion-list>
    </ion-list>
</ion-content>

|------------------------------------------------------------|

import { NavController } from 'ionic-angular';
import { Component } from '@angular/core';
import { RssService } from '../../providers/rss-service/rss-service';
import { DetailPage } from '../detail-page/detail-page';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [RssService],

})
export class HomePage {

  constructor(public rssService:RssService, public nav:NavController) {

      this.nav = nav;
      var entries = [];
      this.rssService.load().subscribe(
          data => {
              entries = data;
          }
      );

   }

  openPage(entry) {
      console.log('open page called with '+ entry.title);
      this.nav.push(DetailPage, {selectedEntry:entry});
  }

}

detail-page.html - detail-page.ts

<ion-navbar *navbar>
    <ion-title>{{entry.title}}</ion-title>
</ion-navbar>

<ion-content padding class="detail-page">
    <div [innerHTML]="entry.description"></div>
</ion-content>

|---------------------------------------------|

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

@Component({
    selector: 'detail-page',
    templateUrl: 'detail-page.html'
})
export class DetailPage {
    constructor(public nav: NavController, navParams:NavParams) {
        console.log('run');
        this.nav = nav;
        var entry = navParams.get('selectedEntry');
        console.log('my entry is '+ entry.title);
    }
}

最佳答案

请查看代码注释。

尝试使用

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


@Injectable()
export class RssService {

  constructor(public http: Http) {
    console.log('Hello RssService Provider');
  }

  load() {

        return Observable.create(s => {

        this.http.get('https://query.yahooapis.com/v1/public/yql?q=select%20title%2Clink%2Cdescription%20from%20rss%20where%20url%3D%22http%3A%2F%2Ffeeds.feedburner.com%2Fraymondcamdensblog%3Fformat%3Dxml%22&format=json&diagnostics=true&callback=')
        .map(res => res.json()) /* map res obj to json obj */ 
        .subscribe(data => {
           console.log(data);
           var items = data.query.results.item;
           items.forEach(i=>s.next(i));
           s.complete();
        });
      });
 }

}

import { NavController } from 'ionic-angular';
import { Component } from '@angular/core';
import { RssService } from '../../providers/rss-service';
import { DetailPage } from '../detail/detail';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {

  public entries: any  = []; /* this needs to be class level variable */

  constructor(public rssService:RssService, public nav:NavController) {    
  }

  ionViewDidLoad(){
      this.rssService.load().subscribe(
          data => {
              this.entries.push(data); /* push retrieved data into the array */
          }
      );
  } 

  openPage(entry) {
      console.log('open page called with '+ entry.title);
      this.nav.push(DetailPage, {selectedEntry:entry});
  }

}

关于javascript - 获取 Rss feed ionic 2 时出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41527227/

相关文章:

javascript - Vue更新多维数组中的值

html - 如何删除导航栏下方的白线

html - 多个 <nav> 标签

javascript - Webpack:使用 ng-include 的 require

javascript - 使用 AngularJS,我如何利用 ng-show 针对数组来查找某些值?

javascript - 带有 React 的 ESLint 给出 `no-unused-vars` 错误

javascript - GridView WebForm 每行有多个复选框,但每行只允许检查 1 个

javascript - 如何在 ExtReact 中正确布局表单中的元素?

html - 如何在此菜单中添加粗体?

javascript - 如何调用 http Get 服务并在单击按钮时在 angularjs 的 div 中显示其响应?