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

Posted 2023-02-23

【中文标题】ionic 2，刷新带有 2 个或更多徽标的模态页面

【英文标题】：ionic 2, refresh a modal page with 2 or more logos

【发布时间】：2017-11-06 18:46:52

【问题描述】：

在启动画面关闭后，我调用了一个模式页面。 这是赞助商的页面。来自 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" >
      <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);
    
  

【参考方案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);
  

【讨论】：

谢谢菲利普。解决了这个问题，但我有这个模块的最后一个：它是一个模式页面，在最后一个赞助商的标志出现后（加上延迟时间），这个页面将被关闭。当我将 viewCtrl.dismiss() 放在 clearInterval (intervalHandle) 之后时，会显示徽标并在此后不久，没有延迟时间。我该如何解决这个问题？又来了

对不起，我会解释的更清楚。赞助商页面是一个模态页面。我在clearInterval(intervalHandle)之后使用this.viewCtrl.dismiss()，也就是循环结束。但是最后一个赞助商出现并且页面关闭。我需要在它关闭视图之前延迟。

setTimeOut(()=> this.viewCtrl.dismiss(); ,1000);

再来一次。完美。