时间戳

首页 > 解决方案 > ngfor 不显示

angular - ngfor 不显示

问题描述

提供者工作，但 *ngFor 不显示。

在下图中，您可以看到提供程序加载数据但未显示在屏幕上。

有什么问题？API 正确返回数据，只有视图没有发生。

例子

代码.html

  <ion-header>
  <ion-navbar>
  <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
  </button>
    <ion-title>Deputado</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-item>
        <ion-label color="primary" stacked>Qual deputado?</ion-label>
        <ion-input type="text" (input)="buscarDeputado($event, searchKey)"></ion-input>
    </ion-item>

    <ion-list>  
        <ion-item *ngFor="let deputado of deputados" (click)="selecionarDeputado($event, deputado)">
            <ion-avatar item-left>
                  <img src="https://www.camara.leg.br/internet/deputado/bandep/{{deputado.id}}.jpg"/>
            </ion-avatar>
            <h2>{{deputado.nome}}</h2>
            <p class="item-description">{{deputado.siglaPartido}}</p>
        </ion-item>
    </ion-list> 
</ion-content>

代码.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { CamaraProvider } from '../../providers/camara/camara';
import { DetalhedeputadoPage } from '../detalhedeputado/detalhedeputado';

@IonicPage()
@Component({
  selector: 'page-deputado',
  templateUrl: 'deputado.html',
  providers: [
    CamaraProvider
  ]
})
export class DeputadoPage {

  deputados: Array<any>;

  constructor(public navCtrl: NavController, public navParams: NavParams,private camaraProvider: CamaraProvider) {
  }

  buscarDeputado(event, key) {
        if(event.target.value.length > 2) {
            this.camaraProvider.getDeputado(event.target.value).subscribe(
                data => {
                    this.deputados = data.results; 
                    console.log(data);  
                }   
            );
        }
    }  



    selecionarDeputado(event, deputado) {
        this.navCtrl.push(DetalhedeputadoPage, {
            deputado: deputado
        });
    }    

}

提供者.ts

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


@Injectable()
export class CamaraProvider {

  private baseApiPath = "https://dadosabertos.camara.leg.br/api/v2/";

  constructor(public http: Http){

  }


  getDeputado(deputadoName) {
    var url = this.baseApiPath + 'deputados?nome=' + encodeURI(deputadoName);
    var response = this.http.get(url).map(res => res.json());
    return response;
  }  


}

提供程序完美运行，但未在页面上显示结果。

标签： angularionic3

解决方案

看起来您没有在buscarDeputado函数中获得正确的值。您附加的图像没有任何results价值。在buscarDeputado函数中，尝试更改this.deputados = data.results;为this.deputados = data.dados;.

buscarDeputado(event, key) {
    if(event.target.value.length > 2) {
        this.camaraProvider.getDeputado(event.target.value).subscribe(
            data => {
                this.deputados = data.dados; 
                console.log(data);  
            }   
        );
    }
}

推荐阅读