Предупреждение в консоли Angular 9: невозможно связать с 'ngForOf', так как это не известное свойство 'li' - PullRequest
Новая
       8

Предупреждение в консоли Angular 9: невозможно связать с 'ngForOf', так как это не известное свойство 'li'

0 голосов
/ 19 апреля 2020

Я использую * ngFor массива, и он не показывает данные. Я импортировал BrowserModule в мои app.module.ts и CommonModule в моем дочернем модуле. Консоль

Chrome показывает это предупреждение: не удается связать с 'ngForOf', поскольку оно не является известным свойством ' li '.

Мой код:

.ts 

import { Component, OnInit } from '@angular/core';
import { ProductService } from '../../coco-api/services/product.service';
import { Product } from 'src/app/model/product.model';
import { async } from 'rxjs/internal/scheduler/async';

@Component({
  selector: 'app-coco-workbench-product-list',
  templateUrl: './coco-workbench-product-list.component.html',
  styleUrls: ['./coco-workbench-product-list.component.css']
})
export class CocoWorkbenchProductListComponent implements OnInit {

  public products: Array<any>;

  constructor(
    private productService: ProductService
  ) { }

  ngOnInit(): void {
    this.getProducts();
  }

  getProducts() {
    this.productService.getAll().toPromise().then(data => {
      this.products = data.data;
    })
      .catch();
  }

}

шаблон: 

<li *ngFor="let p of products">
    {{p}}
</li>

child.module 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CocoWorkbenchProductListComponent } from './coco-workbench-product-list/coco-workbench-product-list.component';



@NgModule({
  declarations: [CocoWorkbenchProductListComponent],
  imports: [
    CommonModule
  ]
})
export class CocoWorkbenchProductModule { }

app.module.ts 

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

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { ViewsModule } from './views/views.module';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ViewsModule,
    HttpClientModule ,

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Может показаться, что свойство products не содержит информации, но при выполнении следующих действий в шаблоне отображаются [Object object], [Object object] 

{{products}}

1 Ответ

0 голосов
/ 19 апреля 2020

Как вы ссылаетесь на дочерний модуль и дочерний компонент из вашего модуля / компонента приложения?

Возможно, вам нужно экспортировать CocoWorkbenchProductListComponent из CocoWorkbenchProductModule и импортировать CocoWorkbenchProductModule в ваш AppModule.

...