How can I make angular enter my *ngFor loop?

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]

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.