无法读取未定义 Angular 8 的属性“本机元素”

Question

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

角度8中ElementRef的正确定义是什么，

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

Answer 1

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

根据Angular 8 docs

static - 更改前是否解析查询结果 检测运行（即仅返回静态结果）。如果这个选项是 未提供，编译器将回退到其默认行为， 也就是使用查询结果来确定查询的时机 解决。如果任何查询结果在嵌套视图中（例如 *ngIf)，查询将在更改检测运行后解决。否则，它将在更改检测运行之前解决。

所以你应该将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);
  }