如何在HTML上显示来自HTTP的结果得到角度

Question

我正在尝试在我的 HTML 上显示 Http.get(( 的结果，但它仅在我遇到错误时才显示，我的意思是，如果我找不到 404，它只会在我的 HTML 上打印一条消息，但现在我没有 404 我有一个响应，我想知道如何使用 HTML 打印它。我将解释我的项目的结构...

我

有一个名为提供者的文件夹，我有列表服务.ts，它包含获取...

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
@Injectable()
export class ListServiceProvider {
    private headers = new Headers({'Content-Type': 'application/json'});
    private apiUrl = ""; // URL to web api
  constructor(public http: Http) {
    console.log('Hello I'm the ListServiceProvider Provider');
  }
  getList(): Promise<List[]> {
    return this.http.get(this.apiUrl+'list/')
               .toPromise()
               .then(response => response.json().data as List[])
               .catch(this.handleErrorPromise);
  }
   //if an error ocurred while doing api calls 
  private handleErrorPromise (error: Response | any) {
  console.error(error.message || error);
  return Promise.reject(error.message || error);
    }
}

现在我已经在应用程序文件夹上创建了一个类(不知道这是否是放置它的最佳方式......(名为 List

export class List{
    name: string;
    surname: string;
    phoneNumber: any;
    imageURL: string;
    email: string;
    constructor(name: string,
    surname: string,phoneNumber: any,
    imageURL: string,
    email: string){
        this.name = name;
        this.surname = surname;
        this.phoneNumber = phoneNumber;
        this.imageURL = imageURL;
        this.email = email;
    }
}

现在我有一个 List-list.ts 文件，我可以在其中进行调用并保存对象，如下所示

import { Component, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { List} from '../../app/list';
@IonicPage()
@Component({
  selector: 'page-list-list',
  templateUrl: 'list-list.html'
})
export class listListPage implements OnInit{
   promiseList: Promise<List[]>
   mList: List[];
   errorMessage: String;

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    private listServiceProvider: ListServiceProvider
    ){}  
  ngOnInit(): void {
  this.promiseList= this.listServiceProvider.getList();
  this.promiseList.then(
           list=> this.mList= list,
           error =>  this.errorMessage = <any>error);

   }
}

最后在我的 HTML 上，我有这个...

<ul>
    <li *ngFor="let list of promiseList | async">
        Name: {{list.name}}, Surname: {{list.surname}}
    </li>
</ul>
<div *ngIf="errorMessage">
    <ion-card>
        <ion-item>
            <h2>There's an error</h2>
        </ion-item>
    </ion-card>
</div>

当我收到 404 错误时，它会显示div但是如果我从我的 API 收到响应，它不会显示列表中的名称和姓氏......我错过了什么？

Answer 1

您在评论中要解决的问题太多了。

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
@Injectable()
export class ListServiceProvider {
    private headers = new Headers({'Content-Type': 'application/json'});
    private apiUrl = ""; // URL to web api
  constructor(public http: Http) {
    console.log("Hello I'm the ListServiceProvider Provider");
  }
  getList(): Promise<List[]> {
    return this.http.get(this.apiUrl+'list/')
               .toPromise()
               .then(response => {
                    let data = response.json().data as List[];
                    console.log(data);
                    return data;
                )
               .catch(this.handleErrorPromise);
  }
   //if an error ocurred while doing api calls 
  private handleErrorPromise (error: Response | any) {
  console.error(error.message || error);
  return Promise.reject(error.message || error);
    }
}

组件应该是这样的。

export class listListPage implements OnInit{
   // promiseList: Promise<List[]>
   mList: List[];
   errorMessage: String;

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    private listServiceProvider: ListServiceProvider
    ){}  
  ngOnInit(): void {
      this.listServiceProvider.getList()
         .then(
           list=> {this.mList= list; console.log(list)},
           error =>  this.errorMessage = <any>error);
   }
}

在你的 HTML 中，它应该是

<ul>
    <li *ngFor="let list of mList">
        Name: {{list.name}}, Surname: {{list.surname}}
    </li>
</ul>

更新 ： 使用 rx。

首先让你的承诺代码工作。然后试试这个。

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
@Injectable()
export class ListServiceProvider {
    private headers = new Headers({'Content-Type': 'application/json'});
    private apiUrl = ""; // URL to web api
  constructor(public http: Http) {
    console.log('Hello I'm the ListServiceProvider Provider');
  }
  getList(): Promise<List[]> {
    return this.http.get(this.apiUrl+'list/')
               .do(response => console.log('response',response)
               .map(response => response.json().data);                   
  }
}

元件

import { Component, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';
import { List} from '../../app/list';
@IonicPage()
@Component({
  selector: 'page-list-list',
  templateUrl: 'list-list.html'
})
export class listListPage implements OnInit{
   mList$: Observable<List[]>;
   errorMessage: String;

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    private listServiceProvider: ListServiceProvider
    ){}  
  ngOnInit(): void {
     this.mList= this.listServiceProvider.getList();
  }
}

在您的 HTML 内部

  <ul>
        <li *ngFor="let list of mList | async">
            Name: {{list.name}}, Surname: {{list.surname}}
        </li>
    </ul>

Answer 2

您的数据

在您的mList:List[]中。你在promiseList: Promise<List[]>中使用*ngFor

TS

ngOnInit(): void {
  this.listServiceProvider.getList().then(
           list=> this.mList= list, //mList contains all data from server side
           error =>  this.errorMessage = <any>error);

   }

.HTML

<ul *ngIf="mList">
    <li *ngFor="let list of mList">
        Name: {{list.name}}, Surname: {{list.surname}}
    </li>
</ul>
<div *ngIf="errorMessage">
    <ion-card>
        <ion-item>
            <h2>There's an error</h2>
        </ion-item>
    </ion-card>
</div>