web-dev-qa-db-ja.com

未定義のプロパティ 'native-element'を読み取れませんAngular 8

私のangularアプリケーションバージョンがangular 7からangular 8にアップグレードされた後、このような行で複雑な問題が発生します

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

    constructor(){}
    ...
}

新しい定義にstaticパラメータが必要であることを読み、コードを変更しました

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

そして問題は解決したと思いました。

しかし、いいえ、ランタイムエラーを受け入れます。

未定義のプロパティ 'nativeElement'を読み取れません

このコードに関連

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());
}

angular 8、のElementRefの正しい定義は何ですか？

または-この問題を解決するには？

angularviewchildangular8
5
Stack Overflow

このようなmat-option要素のElementRefタイプChildViewを作成したため、同じ問題に直面していました

テンプレート

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

コード

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

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

ElementRefの代わりにMatOptionを使用して問題を修正しました。ElementRefは official docs のようにネイティブDOM要素に対してのみ機能するためです。

更新されたコード

  @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