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

Answer 1

在某些情况下，Angular无法检测到变化。（在使用图像时我个人经常遇到这种情况）要强制Angular执行ngDoCheck（），请使用以下代码。

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

constructor(public chRef: ChangeDetectionRef) {

}

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

祝你好运！

为什么在我的Ionic 2应用程序中错误地查看更新？

1 个答案: