Question

我目前正在尝试为我的Ionic2应用程序设置Rest-API。作为后端，我正在使用Crud-API，它已经正常工作了。但是当我从APP调用API时遇到了问题。

我正在使用以下类作为服务来进行http调用：

import {Http, Response} from '@angular/http';
import 'rxjs/add/operator/map';

export class NoteService {
static get parameters() {
    return [[Http]];
}

constructor(private http:Http) {

}

searchNotes() {
    var url = 'http://localhost/plotnote/api_crud.php/note/1';
    var response = this.http.get(url).map(res => res.json());
    return response;
}
}

然后我使用此服务的searchNotes-Method获取结果并将其写入数组注释中：

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {NoteService} from '../services/NoteService';

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

export class HomePage {

notes: Array<any>;

constructor(private navController: NavController, private noteService:                     NoteService) {
    this.listNotes();
    console.log("notes: " + this.notes);
}

listNotes() {
  this.noteService.searchNotes().subscribe(
    data => {
      this.notes = data.results;
      console.log('Data: ');
      console.log(data);
    },
    err => {
      console.log(err);
    },
    () => console.log('Note Search Complete')
  );
}

}

最后要显示笔记，我会执行以下操作：

<ion-content class="home" padding>
    <ion-list>
        <ion-card *ngFor="let note of notes">
            <ion-card-content>
                {{note.text}}
            </ion-card-content>
        </ion-card>
    </ion-list>
</ion-content>

可悲的是，这根本不起作用:(。我试图通过js-console找到问题，看起来我从api获得了正确的数据，但是将数据放入notes-Array似乎存在问题。以下是控制台输出的屏幕截图： js-console output

我希望你们能帮助我找到问题并让这件事发挥作用：）

如何处理Angular2 / Ionic2中的http-Calls

0 个答案: