Since this afternoon, I've been facing a challenge that I can't seem to grasp.
The issue lies within a service I created; in this file, there is an object from which I aim to showcase the data in a loop.
An error message is displayed:
NG0303: Can't bind to 'ngForOf' since it isn't a known property of 'tr'.
Upon researching on Google, suggestions included adding imports: [BrowserModule] in app.module.ts.
Yet, the problem remains unsolved...
I've attempted removing and re-adding the Portfolio component 10 times, but the issue persists.
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 class="home-content container ">
<h1 class="text-center pt-5 pb-3">Portfolio page</h1>
<div class="row pt-3 container">
<table class="table table-bordered">
<thead class="thead-light">
<tr class="text-center">
<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" class="text-center"> {{ 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));
}
}
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() { }
}
Data retrieval is not successful on the portfolio page.
To view the issue on Stackblitz and possibly find a solution, please visit here.
Your assistance in identifying and resolving this problem would be greatly appreciated.