Angular 10 Tabs Component ERROR TypeError：无法读取未定义的属性“nativeElement”答案

【问题标题】：Angular 10 Tabs Component ERROR TypeError: Cannot read property 'nativeElement' of undefinedAngular 10 Tabs Component ERROR TypeError：无法读取未定义的属性“nativeElement”
【发布时间】：2021-01-02 20:20:16
【问题描述】：

我是 Angular 的新手。我对 Angular 10 Material Tabs 组件有疑问，我已经尝试关注 Angular 文档和其他教程网站。

选项卡的标题显示但内容不显示。控制台中显示的错误是这样的“ERROR TypeError: Cannot read property 'nativeElement' of undefined”

screenshot of the error in my app

这是我的代码，我在 app.module.ts 中导入了 MatTabsModule

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-penilaian',
  templateUrl: './penilaian.component.html',
  styleUrls: ['./penilaian.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class PenilaianComponent implements OnInit {

  constructor() {}

  ngOnInit(): void {}
}

<mat-tab-group mat-align-tabs="center" class="tab">
  <mat-tab label="tab A">
    <p>TEST 1</p>
  </mat-tab>
  <mat-tab label="tab B">
    <p>TEST 2</p>
  </mat-tab>
  <mat-tab label="tab C">
    <p>TEST 3</p>
  </mat-tab>
</mat-tab-group>

【问题讨论】：

我遇到了同样的问题。你有想过这个吗？

标签： angular angular-material tabs angular10

【解决方案1】：

不确定这是否有帮助。但是您使用的是 ViewEncapsulation.None，这意味着 penilaian.component.css 中的任何样式也将应用于子项（请记住，使用此 ViewEncapsulation 设置会导致此处不创建阴影 DOM，并且样式将添加到 head 标签），这意味着在这种情况下每个 mat-tab。此外，每个选项卡（子组件）将（默认情况下）被初始化（除非延迟加载），但仅在激活选项卡时才被注入 DOM。所以一般来说：可能是，您正在尝试定位选项卡内的目标，因为该选项卡未处于活动状态，因此无法定位。这也许可以解释您的错误...？

【讨论】：