当我没有执行任何数据更改时，为什么会收到 NG0901 错误？

Question

在下面的代码段中，我正在迭代 ardene.section1.items。我已将此数组记录到控制台以验证它确实存在。“BEFORE FOR LOOP”测试会打印到屏幕上，但“INSIDE FOR LOOP”测试不会打印。我得到了 NG0901 错误，Angular 告诉我这是一个 ngDoCheck 错误。

<div class="row mt-4">
BEFORE FOR LOOP
<div class="col text-center col-12 col-md-3 mb-4 mb-md-0"
    *ngFor="let item of ardene.section1.items">
    INSIDE FOR LOOP
    <img class="img-fluid" 
        src=`{{ardene.assetPath}}{{item.img}}`>
    <div>
        <h5 class="text-center fw-bold mt-2">{{item.name}}</h5>
        <h6 class="text-center">{{item.description}}<br></h6>
        <a>
            <h6 class="fw-bold">Shop Now</h6>
        </a>
    </div>
</div>    

生成 ardene.section1.items 的组件代码如下所示。

  constructor(
    private store:Store<{ardeneState}>
  ) { }

  ngOnInit(): void {
    this.subscribeToReduxStores();
  }

private subscribeToReduxStores = () => {
const ardene$ = this.store.select(state => {
  return state.ardeneState
})

ardene$.subscribe(ardene => {
  this.ardene = ardene;

  console.log('ardene.section1.heading', this.ardene.section1.heading)
  console.log('ardene.section1.items', this.ardene.section1.items)
  console.log('ardene', this.ardene)
})
  }

数据来自 redux 存储：

const initialState = {
  assetPath: 'app/category/ladies-apparel/ardene/assets/img/',

  section1: {
    heading: 'New Denim Guide',
    subheading: "EVERYBODY'S OBSESSING OVER THESE STYLES",
    items: {
      img: 'ardene-6.jpg',
      name: 'Mom Jeans',
      description: 'The vintage silhouette',
      link: '',
    },
  },
};

错误：

ERROR Error: NG0901
at e.find (main.10edf50a2ef1763e.js:1:146206)
at h.ngDoCheck (main.10edf50a2ef1763e.js:1:43158)
at Vs (main.10edf50a2ef1763e.js:1:56860)
at Bs (main.10edf50a2ef1763e.js:1:56661)
at yr (main.10edf50a2ef1763e.js:1:56381)
at ro (main.10edf50a2ef1763e.js:1:76106)
at Gy (main.10edf50a2ef1763e.js:1:82951)
at _y (main.10edf50a2ef1763e.js:1:76845)
at ro (main.10edf50a2ef1763e.js:1:76856)
at Hy (main.10edf50a2ef1763e.js:1:76404)

Answer 1

您收到错误是因为您在使用时尝试迭代对象而不是数组*ngFor。

// ardene.section1.items is an object and not an array
*ngFor="let item of ardene.section1.items"

NgFor 仅支持绑定到可迭代对象（例如数组）。如果你想迭代一个对象，你可以使用KeyValuePipe

将 Object 或 Map 转换为键值对数组。

查看您的数据结构，我没有看到您使用的任何理由*ngFor，您可以简单地访问对象属性，如下所示：

{{ardene?.section1?.items?.img}}
{{ardene?.section1?.items?.name}}
{{ardene?.section1?.items?.description}}

如果您想避免重复ardene?.section1?.items，您可以尝试执行以下操作：

<ng-container *ngIf="ardene?.section1?.items as item">
  <img class="img-fluid" src=`{{ardene.assetPath}}{{item?.img}}`>
  <div>
    <h5 class="text-center fw-bold mt-2">{{item?.name}}</h5>
    <h6 class="text-center">{{item?.description}}<br></h6>
    <a>
      <h6 class="fw-bold">Shop Now</h6>
    </a>
  </div>
</ng-container>