Question

我在关闭启动画面后调用了一个模态页面。这是赞助商的页面。从API来到Logo（imagem）和一些文本（texto）。模态在3000 ms后自动关闭起初我把延迟代码放在构造函数中，它工作正常。有一个赞助商，没有问题，有2个或更多徽标，不起作用。

它只显示最后一个徽标，即使我延迟刷新屏幕。

如何显示2个或更多3个徽标？

如何刷新视图？

patrocinio.html

<ion-content padding class="fundo-titulo">

  <div style="margin-top:40%">
      <br/>
      <img src="http://example.com/api/imagens/Patrocinios/{{imagem}}" width="90%">
      <br /> 
      <h3 text-center>{{ texto }}</h3>
  </div>
</ion-content>

patrocinio.ts

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

@IonicPage()
@Component({
  selector: 'page-patrocinio',
  templateUrl: 'patrocinio.html',
})
export class Patrocinio {

  public patrocinios: any;
  public tempo: string;
  public imagem: string;
  public texto: string;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public loading: LoadingController,
    public viewCtrl: ViewController,
    public conexaoServico: Conexao) {

  }

  ionViewDidLoad() {
    let loader = this.loading.create({
     // spinner: 'ios',
     // content: 'Carregando ...',
    });

    loader.present().then(() => {
      this.conexaoServico.getSponsors('1').subscribe((data) => {
        this.patrocinios = data.Patrocinios;
        console.log(this.patrocinios);
        console.log(this.patrocinios.length);
      });
      loader.dismiss();
    });
  }

  ionViewDidEnter() {
    console.log(this.patrocinios);
    console.log(this.patrocinios.length);

    var i = 0;
    for (i = 0; i < this.patrocinios.length; i++) {

      this.imagem = this.patrocinios[i].Imagem;
      this.texto = this.patrocinios[i].Texto;
      console.log(this.imagem);

      //this.navCtrl.resize;

      var delayInMilliseconds = 3000;
      console.log('aqui')
      setTimeout(function () {
        this.viewCtrl.dismiss();
        //viewCtrl.dismiss();
      }, delayInMilliseconds);
    }
  }
}

Answer 1

您在ionViewDidEnter中循环出现逻辑错误。你想要做的是在delayInMilliseconds期间调用一个函数来更新你的模态。这stackblitz有效，但可能不是最好的方法。

请参阅以下关键代码：

home.html的

<ion-content padding>
  <div>{{sponsor}}</div>
</ion-content>

home.ts

export class HomePage {
  sponsor : string = '';
  sponsors :string[] = ['hello', 'world'];
  index : number = 0;
  constructor(public navCtrl: NavController) {
    let intervalHandle = setInterval(()=> {
      this.sponsor = this.sponsors[this.index];
      this.index++;

      if(this.index == this.sponsors.length)
      {
        clearInterval(intervalHandle);
      }
    },2000);
  }

}

离子2，刷新带有2个或更多徽标的模态页面

1 个答案: