web-dev-qa-db-fra.com

Impossible de lire la propriété 'native-element' d'undefined Angular 8

après mon angular versions d'application mise à niveau de angular 7 à angular 8 je rencontre un problème de complication avec des lignes comme celle-ci

export class followupComponent implements OnInit {
    @ViewChild('message') messageElement: ElementRef;

    constructor(){}
    ...
}

J'ai lu que la nouvelle définition exigeait le paramètre static et je change le code

@ViewChild('message', { static: true })) messageElement: ElementRef;

et je pensais que le problème était résolu.

Mais non, j'accepte l'erreur d'exécution:

impossible de lire la propriété 'nativeElement' de undefined

lié à ce code

HTML:

<div class="message">
    <div class="action-buttons">
        <img src="{{imgPath + '_Edit_Hover.png'}}" (click)="OnEdit(Followup)">
    </div>
    <textarea matInput #message [ngModel]="Followup.Message"></textarea>
</div>

TS:

OnEdit(followup: Followup) {
    setTimeout(() => this.messageElement.nativeElement.focus());
}

Quelle est la définition correcte de ElementRef dans angular 8,

ou - Comment résoudre ce problème?

angularviewchildangular8
5
Stack Overflow

J'étais confronté au même problème en raison de la création d'un ChildView de type ElementRef pour un élément mat-option comme celui-ci

Modèle 

<mat-select (selectionChange)="handleMetaSignalChange();">
<mat-option #metaSignalOption *ngFor="let metaSignal of metaSignals" [value]="metaSignal">
                                {{ metaSignal.name }}
</mat-option>
</mat-select>

Code 

 @ViewChild("metaSignalOption", { static: false }) selectedMetaSignal : ElementRef;

 handleMetaSignalChange() {
   console.log('Meta Signal Changed to ' + this.selectedMetaSignal.nativeElement.value);
 }

Et j'ai résolu le problème en utilisant MatOption au lieu d'ElementRef car ElementRef ne fonctionne que pour les éléments DOM natifs selon documents officiels .

Code mis à jour 

  @ViewChild("metaSignalOption", { static: false }) selectedMetaSignal : MatOption;

  handleMetaSignalChange() {
   // Now selectedMetaSignal is a MatOption, not a native Element
    console.log('Meta Signal Changed to ' + this.selectedMetaSignal.viewValue);
  }
1
MuhammadUmarFarooq