我正在开发一个 Angular WebApp，但我似乎无法让 *ngFor 工作

Question

老实说，我已经尝试了我所看到的一切，只导入 app-routing.module 和 app.module，添加 CommonModule 以及 ng build 和 reserve。有人请救救我吧，我已经用了 2 个小时了，这是我的 WebApp 的最后一部分，在此先感谢。

应用-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]
    })

*编辑添加了我的 html 以防出现错误

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

**编辑添加我的组件以防出现错误

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;
});
}

我得到的错误是

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

**编辑重新启动浏览器和 VSCode 后，错误现在是：

NgFor only supports binding to Iterables such as Arrays.

Answer 1

你试过了吗

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

Answer 2

根据您的评论，您从您的服务接收到一个对象 { sentences: [...] }，而不是一个数组。您将需要更改接收结果的函数，然后设置本地 history 属性.

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

Answer 3

看起来句子是一个数组，但历史是一个对象。试试这个：

*ngFor="let item of history.sentences"

我正在开发一个 Angular WebApp，但我似乎无法让 *ngFor 工作

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

angular

typescript

ngfor