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

Question

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

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

如何为3s显示2个或多个logo？

如何刷新视图？

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

}