时间戳

首页 > 解决方案 > 我正在开发一个 Angular WebApp，但我似乎无法让 *ngFor 工作

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

问题描述

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

应用程序路由模块

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

应用程序模块

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 添加了我的 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.

标签： angulartypescriptngfor

解决方案

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

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

推荐阅读