Angular - Can’t bind to 'ngForOf' Since it isn’t a known Property of 'div'

Asked

Viewed 1,488 times

-1

In an Angular8 application the component created does not identify the *ngFor command, and returns error: Can't bind to 'ngForOf' since it isn't a known property of 'div'.

View Accounting Component Code:

<p>contabil works!</p>
<div *ngFor='let c of contas'>1</div>

Código do Contabilmodule:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ContabilComponent } from './contabil/contabil.component';

@NgModule({
  declarations: [ContabilComponent],
  imports: [
    CommonModule
  ]
})
export class ContabilModule { }

Code of Contabilcomponent.ts

import { Component, OnInit } from '@angular/core';
import { ContabilService } from './../contabil.service';
import { ContabilDTO } from 'src/app/shared/model/contabil.dto';

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

  private contas: ContabilDTO[] = [];

  constructor(private contabil: ContabilService) { }

  ngOnInit(): void {

    this.contabil.list('').subscribe(response=>{
      this.contas = response;
      console.log(this.contas)
    }, error => {
      console.log(error)
    })
  }
}

Appmodule code

import { MenuaccordionModule } from './shared/components/menuaccordion/menuaccordion.module';
import { UsuarioModule } from './modules/usuario/usuario.module';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UserService } from './core/services/user.service';
import { HomeComponent } from './modules/home/home.component';
import { AuthInterceptorProvider } from './core/interceptors/auth.interceptor';
import { ErrorInterceptorProvider } from './core/interceptors/error.interceptor';

import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    PerfectScrollbarModule,
    UsuarioModule,
    MenuaccordionModule
  ],
  providers: [
    ErrorInterceptorProvider,
    AuthInterceptorProvider,
    UserService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

How to make ngFor recognized in the view?

typescript angular-6

  • How so ngFor is recognized in the view?

  • The returned error informs that it is not possible to link ngFor because it is an unknown property by div (which is in the view, html file). I’m not getting ngFor to work.

  • There is no sense in this error, if you declared the module Browsermodule in Appmodule and the Commonmodule in the component, you do not have the error pq!

  • Yes, I have checked syntax, deleted and recreated module and component, and always the same error. I continue in the search. At other points in the application ngFor is working properly, so there is no problem in installing the angular.

1 answer

0

Within the Accounting class the accounts attribute is private, which prevents it from being rendered in the View. The attribute has been modified to public, thus correcting the failure.

 public contas: ContabilDTO[] = [];

Browser other questions tagged typescript angular-6

You are not signed in. Login or sign up in order to post.