使用NG-ZORRO列表组件报错：无法绑定到‘nzDataSource’

先帮你拆解下问题根源：NG-ZORRO的nz-list组件本身其实没有nzDataSource这个输入属性——这个属性是配合模板渲染逻辑使用的，你大概率是要么没正确导入组件，要么混淆了用法。下面分场景给你解决办法：

1. 先检查组件导入是否到位 #

这是最容易踩的坑，确保你已经在当前Angular模块中导入了NzListModule：

// 比如在app.module.ts或者你的业务模块文件里
import { NzListModule } from 'ng-zorro-antd/list';

@NgModule({
  imports: [
    // ...其他你需要的模块
    NzListModule // 必须添加这一行
  ]
})
export class YourBusinessModule { }

如果没导入这个模块，Angular根本识别不了nz-list的任何专属属性，自然会抛出绑定错误。

2. 用正确的方式使用数据源 #

nzDataSource需要和nzRenderItem模板配合使用，正确的模板写法应该是这样（适用于NG-ZORRO v10及以上版本）：

<nz-list [nzDataSource]="yourDataArray">
  <ng-template #itemTemplate let-item>
    <nz-list-item>
      {{ item.title }} <!-- 这里替换成你的数据字段 -->
    </nz-list-item>
  </ng-template>
</nz-list>

如果你觉得这种写法麻烦，也可以用更直观的*ngFor遍历方式，完全不需要nzDataSource：

<nz-list>
  <nz-list-item *ngFor="let item of yourDataArray">
    {{ item.title }}
  </nz-list-item>
</nz-list>

3. 排查版本兼容问题 #

如果你的NG-ZORRO版本比较旧（比如v9及以下），nz-list确实没有nzDataSource这个属性。这种情况下要么升级到较新的稳定版本，要么直接用上面的*ngFor写法渲染列表项。

4. 其他极端情况的处理 #

如果以上都没问题，再考虑错误提示里的其他场景：

• 如果你误将nz-list当成了Web组件，可以在模块的schemas数组中添加CUSTOM_ELEMENTS_SCHEMA来屏蔽提示：

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  // ...其他配置
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class YourBusinessModule { }

不过这种情况极少，因为nz-list是标准的Angular组件，不是Web组件。

• 要是想强行忽略所有属性绑定错误，可以添加NO_ERRORS_SCHEMA，但非常不推荐这么做——它会掩盖其他真正的模板问题，不利于后续排查。

总结下来，90%的概率是你没导入NzListModule或者模板写法不对，先从这两点排查就能解决问题啦。

内容的提问来源于stack exchange，提问作者Kianoush