I'm developing an Angular WebApp but I cant seem to get *ngFor to work

Question

I've honestly tried everything I've seen, importing in only and both the app-routing.module and the app.module, adding CommonModule as well as well as ng build and reserve. Someone please save me from myself, I've been on this for 2 hours now and it's the last piece of my WebApp, thanks in advance.

app-routing.module

import { NgModule, Component } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DisplayViewComponent } from './pages/display-view/display-view.component';
import { CommonModule } from '@angular/common';

const routes: Routes = [
  {path: '', redirectTo:'RunninghillWordApp', pathMatch: "full"},
  {path: 'RunninghillWordApp', component: DisplayViewComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes),CommonModule],
  exports: [RouterModule]
})

app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { DisplayViewComponent } from './pages/display-view/display-view.component';

@NgModule({
  declarations: [
    AppComponent, DisplayViewComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    CommonModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
    })

*edit added my html just incase the error is there

        <div class="history-display-container">
            <!-- Display previous sentences -->
            <a class="history-item" *ngFor="let item of history">
                <p>{{item.text}}</p>
            </a>
        </div>

**edit adding my component in case error lies there

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { SentenceService } from '../../services/sentence.service';
import { WordService } from '../../services/word.service';
import { Sentence } from '../../models/sentence.model';
import { Word } from '../../models/word.model';


@Component({
  selector: 'app-display-view',
  templateUrl: './display-view.component.html',
  styleUrls: ['./display-view.component.scss']
})
export class DisplayViewComponent implements OnInit {

  history: Sentence[];
  words: Word[];

  constructor(private sentenceService: SentenceService, private wordService: WordService, private route: ActivatedRoute) { }

  ngOnInit(): void {

    this.route.params.subscribe(
      (params: Params) => {
        console.log(params);
  }
)

//populate sentences and words arrays
this.sentenceService.getSentences().subscribe((sentences: Sentence[]) =>{
  console.log(sentences);
  this.history = sentences;
});
}

The error I get is

Can't bind to 'ngForOf' since it isn't a known property of 'a'.

**edit After restarting my browser and VSCode, the errror is now :

NgFor only supports binding to Iterables such as Arrays.

Answer 1

Based on your comment, your are receiving an object { sentences: [...] } from your service, not an array. You will need to change the function receiving the result and then set the local history property.

//populate sentences and words arrays
this.sentenceService.getSentences().subscribe((result: any) =>{
  this.history = [...result.sentences];
});