为什么在我的 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);
          });
        });
      });

类的方法

  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，因此当用户打开预览时，他会看到带有相机图标的按钮。但是当他按下它时，只有背景ch，但没有按钮切换niether图像出现。但是，如果他第二次按下相机图标，则按钮切换并出现图片。警报仅在第一次有效。我可以理解发生了什么，为什么视图第一次没有更新，而是在第二次更新。

Answer 1

在某些情况下，

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

import { ChangeDetectionRef } from '@angular/core';
constructor(public chRef: ChangeDetectionRef) {
}
yourFunction() {
  this.chRef.detectChanges();
}

祝你好运！