Я разрабатываю Angular WebApp, но не могу заставить * ngFor работать - PullRequest
Новая
       51

Я разрабатываю Angular WebApp, но не могу заставить * ngFor работать

0 голосов
/ 07 августа 2020

Я честно перепробовал все, что видел, импортировал только и app-routing.module, и app.module, добавив CommonModule, а также ng build и резерв. Кто-нибудь, пожалуйста, спасите меня от себя, я занимаюсь этим уже 2 часа, и это последняя часть моего веб-приложения, заранее спасибо.

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

* добавлено редактирование моего 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'.

** edit После перезапуска моего браузера и VSCode теперь ошибка: 

NgFor only supports binding to Iterables such as Arrays.

Ответы [ 3 ]

1 голос
/ 07 августа 2020

Судя по вашему комментарию, вы получаете объект { sentences: [...] } от вашей службы, а не массив. Вам нужно будет изменить функцию получения результата, а затем установить локальное свойство history. 

//populate sentences and words arrays
this.sentenceService.getSentences().subscribe((result: any) =>{
  this.history = [...result.sentences];
});
0 голосов
/ 07 августа 2020

похоже, что предложения - это массив, а история - это объект. попробуйте это: 

*ngFor="let item of history.sentences"
0 голосов
/ 07 августа 2020

Вы пробовали 

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