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:
- Na linha
this.labels=sub.responses[0].textAnnotations - 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
labelsainda 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 (textAnnotationspode estar indefinido).