I've been stuck since this afternoon, and I don't understand my problem.

I created a service, in this file I have an object and I would like to display the data in a loop.

I have an error message:

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

img

I searched on google, and it is proposed to add imports: [BrowserModule] in app.module.ts. The problem is not solved...

I removed the Portfolio component 10 times and redid the code and still have the same problem.

app.module.ts

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

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';



@NgModule({
  imports: [BrowserModule, FormsModule, AppRoutingModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

portfolio.component.html

<div >
   <h1 >Portfolio page</h1>
   <div >
      <table >
         <thead >
            <tr >
               <th scope="col">Name</th>
               <th scope="col">Firstname</th>
               <th scope="col">Address</th>
               <th scope="col">City</th>
               <th scope="col">Country</th>
            </tr>
         </thead>
         <tbody>
            <tr *ngFor="let portfolio of portfolios">
               <td scope="row" > {{ portfolio.portfolioName }} </td>
            </tr>
         </tbody>
      </table>
   </div>
</div>

portfolio.component.ts

import { Component, OnInit } from '@angular/core';
import { PortfolioService } from './portfolio.service';

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

  portfolios : any;

  constructor(private servicePortfolio: PortfolioService) { }

  ngOnInit(): void {
    this.portfolios = this.servicePortfolio.portfolios;
    console.log("Test => "   JSON.stringify(this.portfolios));
  }

}

img

portfolio.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class PortfolioService {

  portfolios = [
    { 
      portfolioName: 'Lenglet',
      portfolioFirstName: 'Alison',
      portfolioAddress: '15, Fleurs',
      portfolioCity: '1300',
      portfolioCountry: 'Alost',
    },
    { 
      portfolioName: 'Rome',
      portfolioFirstName: 'Fredy',
      portfolioAddress: '15, Cerises',
      portfolioCity: '1700',
      portfolioCountry: 'Anvers',
    },
  ]

  constructor() { }
}

I don't retrieve the datas in the portfolio page.

img

I can share you the problem on Stackblitz.

If you find the problem, I will be infinitely grateful to you.

CodePudding user response：

If you declare your portfolioComponent in app.module.ts its going to work. What that means is your portfolio.module.ts doesnt seems to be imported.

Your routing is weird and not really working properly, your path don't work in multiple places so I would start by making sure your routing is properly working and then make sure you are importing your module correctly(lazy loaded or not).

You can see that the module is not imported by trying to import BrowserModule in portfolio.module.ts and not having an error telling you its already imported.

CodePudding user response：

Quick solution: Add PortfolioComponent in AdministrationModule like this

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdministrationRoutingModule } from './administration-routing.module';
import { AdministrationComponent } from './administration.component';
import { PortfolioComponent } from './views/portfolio/portfolio.component';

@NgModule({
  imports: [CommonModule, AdministrationRoutingModule],
  declarations: [AdministrationComponent, PortfolioComponent],
})
export class AdministrationModule {} 

Explanation:

The component PortfolioComponent was not in the declarations of the administration.module.ts the rule is:

• if you use a component in another component
• They have to be in the same module OR the module in which the parent component is must import the child's component

in your case, I don't think you need a module for PortfolioComponent it's just a component.

it should be working in stackBlitz