Angular 10 選項卡組件錯誤類型錯誤：無法讀取未定義的屬性“nativeElement”

Question

我是 Angular 的新學習者。 我的 Angular 10 Material Tabs 組件有問題，我已經嘗試遵循 angular 文檔和其他教程網站。

顯示了選項卡的標題，但沒有顯示內容。 控制台中顯示的錯誤是這樣的“錯誤類型錯誤：無法讀取未定義的屬性'nativeElement'”

我的應用程序中錯誤的屏幕截圖

這是我的代碼，我在 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>

Answer 1

不確定這是否有幫助。 但是您使用的是 ViewEncapsulation.None，這意味着 penilaian.component.css 中的任何樣式也應用於子項（請記住，使用此 ViewEncapsulation 設置會導致此處不會創建 shadow DOM，並且樣式將添加到 head 標記中），這意味着在這種情況下每個墊子標簽。 此外，每個選項卡（子組件）（默認情況下）都會被初始化（除非延遲加載），但只有在選項卡被激活時才會被注入到 DOM 中。 所以一般來說：可能是，您試圖定位選項卡內無法定位的內容，因為該選項卡未處於活動狀態。 這也許可以解釋你的錯誤......？