Question

提供者的工作，但* ng如果未显示。

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

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

Arquivo.ts

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


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

  public deputadoid;
  public deputadodespesa;   

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

  closeModal() {
    this.view.dismiss();
  }


  ionViewWillLoad() {
    this.deputadoid = this.navParams.get("id");
    this.camaraProvider.getDespesaDeputado(this.deputadoid).subscribe(data => {
      let retorno = (data as any)._body;
      this.deputadodespesa = JSON.parse(retorno);
      console.log(retorno);
    }, error => {
    })
  }

}

Arquivo.html

<ion-header>

  <ion-navbar>
    <ion-title>Despesas</ion-title>
    <ion-buttons end>
      <button ion-button (click)="closeModal()">Fechar</button>
    </ion-buttons>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-card >

    <ion-card-content>
        <ion-item *ngIf="deputadodespesa" >                     
            <h3 class="message title">{{ deputadodespesa.nomeFornecedor }}</h3>
            <p>Services :</p>
            <ion-list>
              <ion-item ng-repeat="serv in servIn" class="message">
                <h4 class="title">{{ deputadodespesa.ano }}</h4>
                <p>{{ deputadodespesa.valorDocumento }}</p>
              </ion-item>
            </ion-list>
          </ion-item>

    </ion-card-content>
  </ion-card>


</ion-content>

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

Answer 1

问题不是ngIf，而是您的ion-list在ion-item中。此标签的高度固定。您需要将其更改为div之类的容器标签，或者，如果不需要其他容器，请使用ng-container，这种情况仅在其他角度指令需要标签时使用。

<ion-card >

    <ion-card-content>
        <ng-container *ngIf="deputadodespesa" > <!-- here -->                     
            <h3 class="message title">{{ deputadodespesa.nomeFornecedor }}</h3>
            <p>Services :</p>
            <ion-list>
              <ion-item ng-repeat="serv in servIn" class="message">
                <h4 class="title">{{ deputadodespesa.ano }}</h4>
                <p>{{ deputadodespesa.valorDocumento }}</p>
              </ion-item>
            </ion-list>
          </ng-container>

    </ion-card-content>
  </ion-card>

Ng如果不显示

1 个答案: