Angular 10 Tabs组件错误TypeError：无法读取未定义的属性'nativeElement'

编程问答 2022-07-23

问题描述

我是Angular的新手。我对Angular 10材质选项卡组件有问题，我已经尝试遵循Angular文档和其他教程网站。

显示选项卡的标题，但没有显示内容。控制台中显示的错误是这样的“ ERROR TypeError：无法读取未定义的属性'nativeElement'”

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>

解决方法

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

angularangularangular-materialangular10tabstabs