无法从API数据Angular 6绑定

Question

I'm working with API to get data and bind it to the HTML, i get to show the response on the console but once i try to bind data to the User screen i cannot, nothing is showing

My HTML:

<ul *ngFor="let item of items; let i of index">
 <li class="fa fa-plus">{{item.name}} - {{i}}</li>
</ul>

My TS:

id: number;
name:string;
imageUrl: string;
items:any = {}; 
ngOnInit() {
this.getItems();
}
getItems() {
this.getItemsService.getItems().subscribe(
  res => {
    console.log(res)
    if (res.Success) {
      this.items = res;
    }
  }
)

}

I'm trying to get data from an array of objects this is why i defined items as an object, if i tried to define it as an array, same result, cannot bind data to HTML

My API Link:

http://5a12745f748faa001280a746.mockapi.io/v1/stores/item

Any questions or missing info tell me but kindly i need help binding this data

Answer 1

Two things, HTML first : let i = index is the syntax.

The second one, you have a condition in your binding :

if (res.Success) {
  this.items = res;
}

This implies that your response has a Success property.

I checked your API link, and it doesn't.

So in your service, either you use Http from @angular/http or HttpClient from @angular/common/http . Here are the two syntaxes :

// Http
return this.http.get('url').map(res => res.json());
// HttpClient
return this.http.get<any[]>('url');

For the condition, change to the following, to check if you have data. You don't need to check for success because you have a special callback for that. This means you will always have succeed where the condition is.

if (res) {
  this.items = res;
}