为什么在我的 Ionic 2 应用程序中无法正确查看更新？

Question

我在根据 ngIf 和 CameraPreview 插件更新我的视图时遇到问题。

HTML:

<img *ngIf="taken" src="{{picture}}" />

  <ion-fab (click)="onPictureView(true)" top left bottom small *ngIf="taken">
    <button ion-fab color="light"><ion-icon name="checkmark-circle"></ion-icon></button>
  </ion-fab>

  <ion-fab (click)="onPictureView(false)" top right bottom small *ngIf="taken">
    <button ion-fab color="light"><ion-icon name="trash"></ion-icon></button>
  </ion-fab>

  <ion-fab (click)="takePicture()" center bottom small *ngIf="!taken">
    <button ion-fab color="light"><ion-icon name="camera"></ion-icon></button>
  </ion-fab>

TS:

在构造函数中：

CameraPreview.setOnPictureTakenHandler().subscribe((result) => {

        this.taken = true;
        this.toggleBackground('background-color: #ffffff !important;');
        alert(this.taken);

        window.resolveLocalFileSystemURL('file:///'+result[0], (fileEntry: any) => {
          fileEntry.file((file) => {
            var reader = new FileReader();

            reader.onload = (event:any) => {
              this.picture = event.target.result;
            };
            reader.readAsDataURL(file);
          });
        });
      });

class的方法

  takePicture(){
    CameraPreview.takePicture();
  };

  onPictureView(value: boolean) {
    this.toggleBackground('background-color: transparent !important;');

    if (value) {

      if (this.counter < this.total - 1) {
        this.counter += 1;
        this.picTheme = this.section['photo' + (this.counter + 1)];
      }
      else {
        this.navCtrl.pop();
      }
    }
    this.taken = false;
  };

最初 taken 设置为 false，因此当用户打开预览时，他会看到带有相机图标的按钮。但是当他按下它时，只有背景变化，但按钮也没有切换，也没有图像出现。但是，如果他第二次按下相机图标，则按钮会切换并出现图片。警报仅在第一次起作用。我可以理解发生了什么，为什么视图在第一次没有更新而在第二次更新。

Answer 1

在某些情况下Angular 无法t/doesn 检测到更改。（我个人在处理图像时经常遇到这种情况）要强制 Angular 执行 ngDoCheck()，请使用以下代码。

import { ChangeDetectionRef } from '@angular/core';

constructor(public chRef: ChangeDetectionRef) {

}

yourFunction() {
  this.chRef.detectChanges();
}

祝你好运！

为什么在我的 Ionic 2 应用程序中无法正确查看更新？

Why view updates incorrectly in my Ionic 2 app?

view

android-camera

ionic2

angular