angular - nz-table 组件样式未生效，如何解决？

Question

nz-table 组件样式不显示

根据官方的快速上手，创建的工程。

"dependencies": {

"@angular/common": "^19.2.0",
"@angular/compiler": "^19.2.0",
"@angular/core": "^19.2.0",
"@angular/forms": "^19.2.0",
"@angular/platform-browser": "^19.2.0",
"@angular/platform-browser-dynamic": "^19.2.0",
"@angular/router": "^19.2.0",
"ng-zorro-antd": "^19.3.1",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.15.0"

},
"devDependencies": {

"@angular-devkit/build-angular": "^19.2.12",
"@angular/cli": "^19.2.12",
"@angular/compiler-cli": "^19.2.0",
"@types/jasmine": "~5.1.0",
"jasmine-core": "~5.6.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.7.2"

}

<nz-table #basicTable [nzData]="listOfData">
  <thead>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Address</th>
    <th>Action</th>
  </tr>
  </thead>
  <tbody>
    @for (data of basicTable.data; track data) {
      <tr>
        <td>{{ data.name }}</td>
        <td>{{ data.age }}</td>
        <td>{{ data.address }}</td>
        <td>
          <a>Action 一 {{ data.name }}</a>
          <nz-divider nzType="vertical"></nz-divider>
          <a>Delete</a>
        </td>
      </tr>
    }
  </tbody>
</nz-table>

希望能正确显示 nz-table 的样式

Answer 1

在组件引入里应该引NzTableModule而不是 NzTableComponent