TypeError：无法读取未定义的属性“forEach”

Question

我正在开发一个项目，该项目允许用户为列表拍照，然后程序将允许用户使用cropperjs 裁剪图像，然后它将裁剪后的图像传递给 visionAPI，在那里它将提取text frm image.However 现在我面临这 2 个错误

异常：无法读取未定义的属性“forEach”

TypeError: 无法读取未定义的属性“forEach”

编译器给出的提示之一就是这个

在 CameraPage.getText (main.js:82525)

我不确定这里出了什么问题

以下是代码：

camera.ts

export class CameraPage {

  public image:string;
  width:number = 500;
  height:number = 500;
  quality:number = 90;

  labels: Array<any> = [];

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public testService: TestService, 
    public cameraService: CameraService,
    public toastCtrl: ToastController
  ) {}

  addPhoto(){
    this.cameraService.getImage(this.width,this.height,this.quality)
      .subscribe( (data) => {
          this.image = (data);
          //console.log(btoa(this.image));
          this.getVision(btoa(this.image));
        //console.log(this.image);
        },(error) => {
          // Toast errot and return DEFAULT_PHOTO from Constants
          this.toast(error);
        }
      );
  }

  toast(message: string) {
    let toast = this.toastCtrl.create({
      message: message,
      duration: 2500,
      showCloseButton: false
    });
    toast.present();
  }


  getVision(image64: string) {
    this.testService.getVisionLabels(image64).subscribe((sub) => {    
      this.labels = sub.responses[0].textAnnotations;    
      this.getText();

    }); 
  }

  getText() {
    this.labels.forEach((label) => {
      let translation = {search: label.description, result: ''};
      console.log(label.description);
    });    
  }   
}

camera.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Camera
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <img src={{image}} *ngIf="image" />
  <ion-card-content>


    <button ion-button block outline (click)="addPhoto()">Take A Picture</button>

    <div class="results">
      <div *ngFor="let label of labels">

      <h2>{{label.description}}</h2>
      </div>
    </div>

  </ion-card-content>
</ion-content>

Answer 1

错误的意思是this.labels在getText()方法中是未定义的。

你应该在两个位置设置断点来分析问题：

1. this.labels = sub.responses[0].textAnnotations 线
2. this.labels.forEach 线

检查事项：

• 第一个断点应该在第二个断点之前命中。如果顺序相反，那么当您尝试使用 labels 属性时，您就知道它尚未设置。
• 在第一个断点中，检查 sub.responses[0] 以查看您得到了什么（textAnnotations 可能未定义）。