Question

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

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

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

Code.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>

Code.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
        });
    }    

}

Provider.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;
  }  


}

提供程序可以正常运行，但是不会在页面上显示结果。

Answer 1

似乎您在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);  
            }   
        );
    }
}

Answer 2

返回的结果是一个对象数组，而不仅仅是对象，因此您必须使用键来访问它们，请尝试以下操作：

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

在您的ts中：

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

Answer 3

dados似乎是results的属性，并且是一个数组，而不是results本身。

this.camaraProvider.getDeputado(event.target.value).subscribe(
     data => {
        this.deputados = data.results.dados; // include appropriate null checks
     }
);

Ngfor不显示

3 个答案: