CODEWITHSUNDEEP
javascriptangulartypescript
Mustafa UYSAL
Mustafa UYSAL

Reputation: 143

Angular 5 Error:Can't bind to 'ngForFor' since it isn't a known property of 'li'

My category.component.ts is category.component.ts

import { Component, OnInit } from '@angular/core';
import { CategoryService } from './category.service';
import { Category } from './category';
@Component({
selector: 'app-category',
templateUrl: './category.component.html',
styleUrls: ['./category.component.css'],
providers: [CategoryService]
})
export class CategoryComponent implements OnInit {
title = 'Category';
categories: Category[];
constructor(private categoryService: CategoryService) {}
ngOnInit() {
this.getCategories();
}
getCategories() {
this.categoryService.getCategories().subscribe(res => {
  this.categories = res;
});
}
}

My category.component.html is category.component.html

<h3>{{title}}</h3>
<ul>
<li *ngFor='let item2 for categories'>
  {{item2.CategoryName}}
</li>
</ul>

My category.service.ts is category.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Category } from './category';
 import { Observable } from 'rxjs';
@Injectable()
export class CategoryService {

constructor(private http: HttpClient) { }
getCategories(): Observable<Category[]> {
 return this.http.get<Category[]> 
 ('http://northwindapi.azurewebsites.net/api/categories');
 }
  }

The problem is Angular does't accept li with ngFor. How can i solve this?

Upvotes: 0

Views: 676

Answers (1)

Reza
Reza

Reputation: 19843

change for to of in the expression

<li *ngFor='let item2 of categories'>

Upvotes: 7

Related Questions