英文:
How can I make angular enter my *ngFor loop?
问题
在以下的代码片段中，我将testRecords显示在屏幕上，其中包含测试记录。但是尽管有测试记录，ngFor循环没有被执行。
{{testRecords}}
<div class="row mb-2" *ngFor="let testRecord of testRecords">
{{testRecord}}
<div class="col-12">
<h5 class="fw-semibold mb-2">{{testRecord.topic}}: {{testRecord.subtopic}}</h5>
</div>
<div class="row mb-2" *ngFor="let score of testRecord.scores">
<span class="col">{{score.rightAnswer}}</span>
<span class="col">{{score.wrongAnswer}}</span>
<span class="col">{{score.date}}</span>
</div>
</div>
组件的代码:
ngOnInit() {
this.subscribeToReduxStores();
this.getUserTestRecords();
}
private subscribeToReduxStores = () => {
const user$ = this.store.select((state) => {
return state.userState
})
user$.subscribe(user => {
this.testRecords = user.testRecords;
console.log('TestRecordsComponent.testRecords', this.testRecords)
})
}
private getUserTestRecords = () => {
this.userService.getUserTestRecords();
}
组件内部将testRecords的内容显示在控制台。
TestRecordsComponent.testRecords
(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
0:
{topic: 'Force, Motion and Energy', subtopic: 'Conservation of Energy', scores: Array(4)}
1:
{topic: 'Force, Motion and Energy', subtopic: 'Newtons Laws of Motion', scores: Array(1)}
2:
{topic: 'Human Anatomy and Physiology', subtopic: 'Homeostasis', scores: Array(1)}
3:
{topic: 'Biodiversity', subtopic: 'Interactions between Species', scores: Array(3)}
4:
{topic: 'Genetics', subtopic: ' DNA Structure and Function', scores: Array(1)}
5:
{topic: 'Biodiversity', subtopic: 'Classification of Species', scores: Array(1)}
6:
{topic: 'Force, Motion and Energy', subtopic: 'Work and Machines', scores: Array(2)}
length:
7
我认为我看到了问题，但不知道为什么会发生这种情况。在组件内部从控制台记录的上述数据显示，testRecords是一个包含7个对象的数组。然而，刚刚在ngFor循环之前从控制台记录的testRecords显示，testRecords是7个不同的数组，如下所示。
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
英文:
In the following segment of code, I display testRecords to the screen and there are test records. But the ngFor loop is not entered even though there are test records.
{{testRecords}}
<div class="row mb-2" *ngFor="let testRecord of testRecords">
{{testRecord}}
<div class="col-12">
<h5 class="fw-semibold mb-2">{{testRecord.topic}}: {{testRecord.subtopic}}</h5>
</div>
<div class="row mb-2" *ngFor="let score of testRecord.scores">
<span class="col">{{score.rightAnswer}}</span>
<span class="col">{{score.wrongAnswer}}</span>
<span class="col">{{score.date}}</span>
</div>
</div>
Component's code:
ngOnInit() {
this.subscribeToReduxStores();
this.getUserTestRecords();
}
private subscribeToReduxStores = () => {
const user$ = this.store.select((state) => {
return state.userState
})
user$.subscribe(user => {
this.testRecords = user.testRecords;
console.log('TestRecordsComponent.testRecords', this.testRecords)
})
}
private getUserTestRecords = () => {
this.userService.getUserTestRecords();
}
testRecords within the component displayed to the console.
> TestRecordsComponent.testRecords
(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
0
:
{topic: 'Force, Motion and Energy', subtopic: 'Conservation of Energy', scores: Array(4)}
1
:
{topic: 'Force, Motion and Energy', subtopic: 'Newtons Laws of Motion', scores: Array(1)}
2
:
{topic: 'Human Anatomy and Physiology', subtopic: 'Homeostasis', scores: Array(1)}
3
:
{topic: 'Biodiversity', subtopic: 'Interactions between Species', scores: Array(3)}
4
:
{topic: 'Genetics', subtopic: ' DNA Structure and Function', scores: Array(1)}
5
:
{topic: 'Biodiversity', subtopic: 'Classification of Species', scores: Array(1)}
6
:
{topic: 'Force, Motion and Energy', subtopic: 'Work and Machines', scores: Array(2)}
length
:
7
I think I see the problem, but I don't know why it is happening. The above data logged to the console from within the component shows that testRecords is an array containing 7 objects. However, testRecords logged to the console just before the *ngFor loop shows that testRecords is 7 seven distinct arrays as shown below.
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
答案1
得分: 0
我最初在“subjects common module”下创建了“TestRecords”，因此“TestRecords”在“SubjectsModule”中声明。后来我认为它更适合在“user common module”下，所以我从“subjects”中删除了“TestRecords”，并将其复制到“user”下，但忘记在“UserModule”中声明它。
我想Angular自动将“AppModule”用作“TestRecords”的模块。我还认为“ngFor”指令位于“CommonModule”中，但未在“AppModule”中导入。一旦我在“UserModule”中声明了“TestRecords”，问题就解决了，因为在那里也导入了“CommonModule”。
就我最好的理解，这就是问题所在。一旦我在“UserModule”中声明了“TestRecords”，问题就消失了。
英文:
I originally created TestRecords under the subjects common module so TestRecords was declared in SubjectsModule. I decided it was more appropriate under the user common module so I deleted TestRecords from subjects and copied it under user but forgot to declare it in UserModule.
I suppose Angular automatically used AppModule as the module for TestRecords. And I also suppose the ngFor directive is in CommonModule which was not imported in AppModule. The problem went away once I declared TestRecords in UserModule where CommonModule is also imported.
To the best of my understanding, this was the issue. It simply went away once I declared TestRecords in UserModule.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论