当我没有执行任何数据更改时，为什么我会得到一个NG0901错误？
当我没有执行任何数据更改时，为什么我会得到一个NG0901错误？
提问于 2022-02-08 00:56:44
在下面的代码段中，我将迭代ardene.section1.Item。我已经将这个数组记录到控制台，以验证它是否存在。“FOR循环之前”测试将打印到屏幕上，但"INSIDE FOR循环“测试从未打印过。我得到和NG0901误差，角告诉我是一个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项的组件代码如下所示。
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)回答 2
Stack Overflow用户
回答已采纳
发布于 2022-02-08 03:52:15
在使用*ngFor时，您正在尝试迭代对象而不是数组，因此会出现错误。
// ardene.section1.items is an object and not an array
*ngFor="let item of ardene.section1.items"NgFor只支持绑定到诸如数组之类的Iterable。如果您想迭代一个对象，可以使用以下KeyValuePipe
将对象或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>Stack Overflow用户
发布于 2022-02-08 03:46:47
如果订阅确实为您返回了一些项，那么语法可能会更像这样：
<ng-container *ngIf="(ardene$ | async)?.section1 as item">
<div class="row mt-4">
BEFORE FOR LOOP
<br />
heading: {{ item?.heading }}
<br />
subheadting: {{ item?.subheading }}
<div class="col text-center col-12 col-md-3 mb-4 mb-md-0">
<img
class="img-fluid"
src="`{{ (ardene$ | async).assetPath }}{{ item?.items?.img }}`"
/>
<div>
<h5 class="text-center fw-bold mt-2">{{ item?.items?.name }}</h5>
<h6 class="text-center">{{ item?.items?.description }}<br /></h6>
<a>
<h6 class="fw-bold">Shop Now</h6>
</a>
</div>
</div>
</div>
</ng-container>@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit, AfterViewInit {
ardene$: Observable<any> | undefined;
ardeneObservable = new ReplaySubject<any>(1);
ngAfterViewInit() {
const ardene = {
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: '',
},
},
};
this.ardeneObservable.next(ardene);
}
ngOnInit() {
this.ardene$ = this.ardeneObservable.pipe((data) => {
return data;
});
}
}下面是一个有用的示例：https://stackblitz.com/edit/angular-ivy-i872hc?file=src%2Fapp%2Fapp.component.ts
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71027327
复制相关文章
相似问题
腾讯云开发者
