angular - 无法绑定(bind)到 'nzDataSource'，因为它不是 'nz-list' 的已知属性

Question

我使用 NG-ZORRO 的组件。但是当我需要使用它的列表时请显示此错误:

    Error: Template parse errors:
Can't bind to 'nzDataSource' since it isn't a known property of 'nz-list'.
1. If 'nz-list' is an Angular component and it has 'nzDataSource' input, then verify that it is part of this module.
2. If 'nz-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<nz-list
  [ERROR ->][nzDataSource]="data"
  [nzItemLayout]="'vertical'"
  [nzRenderItem]="item"
"): ng:///AppModule/MainPageComponent.html@1:2
Can't bind to 'nzItemLayout' since it isn't a known property of 'nz-list'.
1. If 'nz-list' is an Angular component and it has 'nzItemLayout' input, then verify that it is part of this module.
2. If 'nz-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<nz-list
  [nzDataSource]="data"
  [ERROR ->][nzItemLayout]="'vertical'"
  [nzRenderItem]="item"
  [nzPagination]="pagination">
"): ng:///AppModule/MainPageComponent.html@2:2
Can't bind to 'nzRenderItem' since it isn't a known property of 'nz-list'.
1. If 'nz-list' is an Angular component and it has 'nzRenderItem' input, then verify that it is part of this module.
2. If 'nz-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
  [nzDataSource]="data"
  [nzItemLayout]="'vertical'"
  [ERROR ->][nzRenderItem]="item"
  [nzPagination]="pagination">
  <ng-template #item let-item>
"): ng:///AppModule/MainPageComponent.html@3:2
Can't bind to 'nzPagination' since it isn't a known property of 'nz-list'.
1. If 'nz-list' is an Angular component and it has 'nzPagination' input, then verify that it is part of this module.
2. If 'nz-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
  [nzItemLayout]="'vertical'"
  [nzRenderItem]="item"
  [ERROR ->][nzPagination]="pagination">
  <ng-template #item let-item>
    <nz-list-item [nzContent]="item.conte"): ng:///AppModule/MainPageComponent.html@4:2
Can't bind to 'nzContent' since it isn't a known property of 'nz-list-item'.
1. If 'nz-list-item' is an Angular component and it has 'nzContent' input, then verify that it is part of this module.
2. If 'nz-list-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
  [nzPagination]="pagination">
  <ng-template #item let-item>
    <nz-list-item [ERROR ->][nzContent]="item.content" [nzActions]="[starAction,likeAction,msgAction]" [nzExtra]="extra">
      <"): ng:///AppModule/MainPageComponent.html@6:18
Can't bind to 'nzActions' since it isn't a known property of 'nz-list-item'.
1. If 'nz-list-item' is an Angular component and it has 'nzActions' input, then verify that it is part of this module.
2. If 'nz-list-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("gination]="pagination">
  <ng-template #item let-item>
    <nz-list-item [nzContent]="item.content" [ERROR ->][nzActions]="[starAction,likeAction,msgAction]" [nzExtra]="extra">
      <ng-template #starAction><i "): ng:///AppModule/MainPageComponent.html@6:45
Can't bind to 'nzExtra' since it isn't a known property of 'nz-list-item'.
1. If 'nz-list-item' is an Angular component and it has 'nzExtra' input, then verify that it is part of this module.
2. If 'nz-list-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("-item>
    <nz-list-item [nzContent]="item.content" [nzActions]="[starAction,likeAction,msgAction]" [ERROR ->][nzExtra]="extra">
      <ng-template #starAction><i class="anticon anticon-star-o" style="margin-rig"): ng:///AppModule/MainPageComponent.html@6:93
Can't bind to 'nzAvatar' since it isn't a known property of 'nz-list-item-meta'.
1. If 'nz-list-item-meta' is an Angular component and it has 'nzAvatar' input, then verify that it is part of this module.
2. If 'nz-list-item-meta' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("n anticon-message" style="margin-right: 8px;"></i> 2</ng-template>
      <nz-list-item-meta
        [ERROR ->][nzAvatar]="item.avatar"
        [nzTitle]="nzTitle"
        [nzDescription]="item.description">
"): ng:///AppModule/MainPageComponent.html@11:8
Can't bind to 'nzTitle' since it isn't a known property of 'nz-list-item-meta'.
1. If 'nz-list-item-meta' is an Angular component and it has 'nzTitle' input, then verify that it is part of this module.
2. If 'nz-list-item-meta' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
      <nz-list-item-meta
        [nzAvatar]="item.avatar"
        [ERROR ->][nzTitle]="nzTitle"
        [nzDescription]="item.description">
        <ng-template #nzTitle><a href"): ng:///AppModule/MainPageComponent.html@12:8
Can't bind to 'nzDescription' since it isn't a known property of 'nz-list-item-meta'.
1. If 'nz-list-item-meta' is an Angular component and it has 'nzDescription' input, then verify that it is part of this module.
2. If 'nz-list-item-meta' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
        [nzAvatar]="item.avatar"
        [nzTitle]="nzTitle"
        [ERROR ->][nzDescription]="item.description">
        <ng-template #nzTitle><a href="{{item.href}}">{{item.titl"): ng:///AppModule/MainPageComponent.html@13:8
'nz-list-item-meta' is not a known element:
1. If 'nz-list-item-meta' is an Angular component, then verify that it is part of this module.
2. If 'nz-list-item-meta' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("#msgAction><i class="anticon anticon-message" style="margin-right: 8px;"></i> 2</ng-template>
      [ERROR ->]<nz-list-item-meta
        [nzAvatar]="item.avatar"
        [nzTitle]="nzTitle"
"): ng:///AppModule/MainPageComponent.html@10:6
'nz-list-item' is not a known element:
1. If 'nz-list-item' is an Angular component, then verify that it is part of this module.
2. If 'nz-list-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  [nzPagination]="pagination">
  <ng-template #item let-item>
    [ERROR ->]<nz-list-item [nzContent]="item.content" [nzActions]="[starAction,likeAction,msgAction]" [nzExtra]="e"): ng:///AppModule/MainPageComponent.html@6:4
'nz-list' is not a known element:
1. If 'nz-list' is an Angular component, then verify that it is part of this module.
2. If 'nz-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<nz-list
  [nzDataSource]="data"
  [nzItemLayout]="'vertical'"
"): ng:///AppModule/MainPageComponent.html@0:0
vendor.bundle.js%20line%20103%20%3E%20eval:706:34

但我不知道问题出在哪里。

这个Html代码:

    <nz-list
  [nzDataSource]="data"
  [nzItemLayout]="'vertical'"
  [nzRenderItem]="item"
  [nzPagination]="pagination">
  <ng-template #item let-item>
    <nz-list-item [nzContent]="item.content" [nzActions]="[starAction,likeAction,msgAction]" [nzExtra]="extra">
      <ng-template #starAction><i class="anticon anticon-star-o" style="margin-right: 8px;"></i> 156</ng-template>
      <ng-template #likeAction><i class="anticon anticon-like-o" style="margin-right: 8px;"></i> 156</ng-template>
      <ng-template #msgAction><i class="anticon anticon-message" style="margin-right: 8px;"></i> 2</ng-template>
      <nz-list-item-meta
        [nzAvatar]="item.avatar"
        [nzTitle]="nzTitle"
        [nzDescription]="item.description">
        <ng-template #nzTitle><a href="{{item.href}}">{{item.title}}</a></ng-template>
      </nz-list-item-meta>
      <ng-template #extra>
        <img width="272" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png">
      </ng-template>
    </nz-list-item>
  </ng-template>
  <ng-template #pagination>
    <nz-pagination [nzPageIndex]="1" [nzTotal]="50"></nz-pagination>
  </ng-template>
</nz-list>

.ts 代码:

export class MainPageComponent implements OnInit {

  constructor() { }
  data = new Array(5).fill({}).map((i, index) => {
    return {
      href: 'http://ant.design',
      title: `ant design part ${index}`,
      avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
      description: 'Ant Design, a design language for background applications, is refined by Ant UED Team.',
      content: 'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.'
    };
  });
  ngOnInit() {
return this.data;
  }

}

如何解决这个问题？

Answer 1

你应该在当前模块中导入 ng-zorro-antd，就像这样:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login/login.component';
import { NgZorroAntdModule } from 'ng-zorro-antd';

@NgModule({
  imports: [
    CommonModule,
    NgZorroAntdModule.forRoot()
  ],
  declarations: [LoginComponent]
})
export class ComponentsModule { }