无法读取未定义 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中ElementRef的正确定义是什么 8,

或者 - 如何解决这个问题？

Answer 1

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

根据Angular 8 docs

static - whether or not to resolve query results before change detection runs (i.e. return static results only). If this option is not provided, the compiler will fall back to its default behavior, which is to use query results to determine the timing of query resolution. 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 并在输入显示后单击编辑，您将在控制台中看到错误。

Answer 2

我遇到了同样的问题，因为我为像这样的 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);
 }

我使用 MatOption 而不是 ElementRef 解决了这个问题，因为根据 official docs.

，ElementRef 仅适用于原生 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);
  }

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

Cannot read property 'native-element' of undefined Angular 8

angular

viewchild

angular8

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

Cannot read property 'native-element' of undefined Angular 8

angular

viewchild

angular8

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