Pesquisa de site

angular - TypeError: Não é possível ler a propriedade 'forEach' de undefined


Estou trabalhando em um projeto que permitiria ao usuário tirar uma foto da lista e então o programa permitirá que o usuário corte a imagem usando o cropperjs, e então passará a imagem cortada para o visionAPI, onde ele extrairá o texto da imagem. No entanto, agora estou enfrentando esses 2 erros

EXCEÇÃO: Não é possível ler a propriedade 'forEach' de indefinido

TypeError: Não é possível ler a propriedade 'forEach' de indefinido

E uma das dicas dadas pelo compilador é esta

em CameraPage.getText (main.js:82525)

Não tenho certeza do que deu errado aqui

Abaixo estão os códigos:

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>

Resposta #1

O que o erro significa é que this.labels está indefinido no método getText().

Você deve definir um ponto de interrupção em dois locais para analisar o problema:

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

Coisas para verificar:

  • O primeiro ponto de interrupção deve ser atingido antes do segundo ponto de interrupção. Se a ordem for inversa, você sabe que a propriedade labels ainda não foi definida quando você tenta usá-la.
  • No primeiro ponto de interrupção, inspecione sub.responses[0] para ver o que você tem (textAnnotations pode estar indefinido).