angular8 + nz-zorro error: 'nzData is not defined'

Question

问题描述

于第二级菜单页面中添加了table组件,收到了如下错误

问题出现的环境背景及自己尝试过哪些方法

项目由angular-cli构建,
package.json如下:

  "dependencies": {
    "@angular/animations": "~8.1.0",
    "@angular/common": "~8.1.0",
    "@angular/compiler": "~8.1.0",
    "@angular/core": "~8.1.0",
    "@angular/forms": "~8.1.0",
    "@angular/platform-browser": "~8.1.0",
    "@angular/platform-browser-dynamic": "~8.1.0",
    "@angular/router": "~8.1.0",
    "cordova": "^9.0.0",
    "highcharts": "^7.1.2",
    "ionic": "^5.1.0",
    "ng-zorro-antd": "^8.0.2",
    "rxjs": "~6.5.2",
    "theaterjs": "^3.2.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.801.0",
    "@angular/cli": "~8.1.0",
    "@angular/compiler-cli": "~8.1.0",
    "@angular/language-service": "~8.1.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~12.0.12",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "^3.4.5"
  }

项目目录如下:

page是一级目录,其子目录是二级目录,
错误发生在record-bill页面,
我尝试直接在record-bill.module.ts中引入NgZorroAntdModule,

@NgModule({
  declarations: [RecordBillComponent],
  imports: [
    CommonModule,
    NgZorroAntdModule
  ]
})

没有效果.

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
引用了table组件的官方例子

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

@Component({
  selector: 'app-record-bill',
  template: `
  <nz-table #basicTable [nzData]="listOfData">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Address</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of basicTable.data">
        <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>
`,
  styleUrls: ['./record-bill.component.scss']
})
export class RecordBillComponent implements OnInit {
  public listOfData = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park'
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park'
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park'
    }
  ];
  constructor() { }

  ngOnInit() {
  }

  operateData(): void {
    
  }

}

你期待的结果是什么？实际看到的错误信息又是什么？

期待正常显示table组件,实际报了上述错误

Answer 1

app.moudule.ts 没有导入NgZorroAntdModule吧

官方文档，快速上手那里。或者你直接用ng add ng-zorro-antd