angular - 无法读取未定义Angular 8的属性 'native-element'

Question

在我的angular应用程序版本从 angular 7 升级到 angular 8 之后
我遇到像这样的行的并发症问题

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

    constructor(){}
    ...
}

我读到新定义需要 static参数
并更改代码

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

我以为问题已经解决了。

但是不，我接受运行时错误:

cannot read property 'nativeElement' of undefined

与此代码有关

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的正确定义是什么

或-如何解决此问题？

Answer 1

<textarea matInput #message [ngModel]="Followup.Message"></textarea>这段代码可能需要显示一些逻辑(例如父节点上的*ngIf或*ngFor或某些异步代码)，这意味着它需要一个变更检测周期才能显示。
根据Angular 8 docs

static - whether or not to resolve query results before changedetection runs (i.e. return static results only). If this option isnot provided, the compiler will fall back to its default behavior,which is to use query results to determine the timing of queryresolution. If any query results are inside a nested view (e.g.*ngIf), the query will be resolved after change detection runs. Otherwise, it will be resolved before change detection runs.

所以你应该将 static设置为 false @ViewChild('message', { static: false })) messageElement: ElementRef;这是一个简单的演示 https://stackblitz.com/edit/angular-qgwhcv
在上面的演示中，输入框将在3秒钟后显示。如果设置 static:false并在显示输入后单击“编辑”，则它将成功使输入聚焦。但是如果更改 static:true并在显示输入后单击“编辑”，则会在控制台中看到错误。