Автоматический рендеринг в угловых не звонит от обратного вызова плагина

Question

Я столкнулся со странной ошибкой в ​​обратном вызове плагина.Я использую ионный с Zip-плагином.И я хочу показать распаковку-прогресс.Но функция обратного вызова не хочет рендеринга вызова, когда скрипт устанавливает новое значение в переменной.Я пробовал открытую переменную, статическую переменную, статическую функцию, широковещательные события, но рендеринг не происходит.Мой код:

import { Component } from '@angular/core';
import { NavController, Platform} from 'ionic-angular';

import { File } from '@ionic-native/file';
import { Zip } from '@ionic-native/zip';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, public platform: Platform, public singleton:SingletonService, private file: File, private zip: Zip) {

    var isUnzipMap = localStorage.getItem("mapUnzip");
    platform.ready().then((readySource) => {
            HomePage.setPercent(18); //
            
            this.zip.unzip(this.file.applicationDirectory +'www/assets/map.zip', this.file.externalDataDirectory, (progress) => {
            HomePage.setPercent(Math.round((progress.loaded / progress.total) * 100));})
            .then((result) => {
                if(result === 0) {
                    localStorage.setItem("mapUnzip","true");
                }
                else {
                    localStorage.setItem("mapUnzip","false");
                };
            });
        }
      
    });
  }
  
  public static setPercent(i) {
    HomePage.progressbarPercent = i + '%';
  }

  get progressbarPercent() {
    return HomePage.progressbarPercent;
  }
}

<ion-content class="menuBg" scrollbar-x="false" scrollbar-y="false">
    <div class="topWindow">
        <div class="topMessageBlock">
            <div id="message" class="message">Text</div>
            <div id="progressbar" class="progressbar">
                <div id="progressbarPosition" class="progressbarPosition" [style.width]="progressbarPercent"></div>
            </div>
        </div>
    </div>
</ion-content>

Функция setPercent устанавливает новое значение в переменной.Если добавить console.log - значение переданной переменной изменится.

Я нашел для меня два варианта работы: 1) использовать document.getElementById ("progressbarPosition"). Style.width = newValue.2) добавить setInterval для любого элемента со страницы.Когда вызывается setInterval, происходит автоматический рендеринг, и моя переменная обновляется с правильной позицией индикатора выполнения.

Я считаю, что мои решения - это костыли, и вы можете найти более рациональное решение этой проблемы.Может кто знает как решить эту проблему?Спасибо!

Answer 1

Я до сих пор не понимаю причину, по которой чертеж не работает, но я нашел решение через угловой.Я использовал ChangeDetectorRef:

import { Component, ChangeDetectorRef } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';

import { File } from '@ionic-native/file';
import { Zip } from '@ionic-native/zip';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})

export class HomePage {
    constructor(public navCtrl: NavController, public platform: Platform, public singleton: SingletonService, private file: File, private zip: Zip, private cdr: ChangeDetectorRef) {

        var isUnzipMap = localStorage.getItem("mapUnzip");
        platform.ready().then((readySource) => {
            HomePage.setPercent(18); //

            this.zip.unzip(this.file.applicationDirectory + 'www/assets/map.zip', this.file.externalDataDirectory, (progress) => {
                HomePage.setPercent(Math.round((progress.loaded / progress.total) * 100));
                this.cdr.detectChanges();
            })
                .then((result) => {
                    if (result === 0) {
                        localStorage.setItem("mapUnzip", "true");
                    }
                    else {
                        localStorage.setItem("mapUnzip", "false");
                    };
                });
        });
    }

    public static setPercent(i) {
        HomePage.progressbarPercent = i + '%';
    }

    get progressbarPercent() {
        return HomePage.progressbarPercent;
    }
}