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

Question

我有一个在启动画面关闭后调用的模态页面。这是赞助商的页面。来自API的徽标（图像）和一些文本（texto）。模态在 3000 毫秒后自动关闭起初，我将延迟代码放在构造函数中，它工作正常。对于一个赞助商，没有问题，带有 2 个或更多徽标的 mas 不起作用。

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

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

如何刷新视图？

帕特罗西尼奥.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>

帕特罗西尼奥

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中循环时有一个逻辑错误。 您要做的是在延迟（以毫秒为单位）期间调用函数来更新模态。 这种堆叠闪电战有效，但可能不是最好的方法。

请参阅下面的关键代码：

首页.html

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

首页

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