我必须通过添加索引遍历模板,如下所示
{{single.amazon_datai.Category}}
以下是接口:https://test.pickcel.com/api/v1/getAmazonDeals。我必须显式地提供数组的索引,如何使其自动化?
</component.ts>
/*this list component calls api to fetch deals from amazon*/
import { Component, OnInit } from '@angular/core';
/*importing services*/
import { DealsService } from '../deals.service'
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
public deals;
constructor(public dealsHttpService : DealsService) {
console.log('List component constructor is called');
}
ngOnInit() {
console.log('List component onInit called');
/*subscribing to observables*/
this.dealsHttpService.getAmazonDeals().subscribe(
data=>{
console.log('logging data');
this.deals = data["data"];
console.log(this.deals)
},
/*handle error if not subscribed*/
error => {
console.log("some error occured");
console.log(error.errorMessage);
}
)
}
}
/>
</html template
<td>{{single.amazon_data[0].Category}}</td>
<td>{{single.amazon_data[0].Title}}</td>
<td>{{single.amazon_data[0].Details}}</td>
/>发布于 2019-07-26 21:03:13
您可以使用*ngFor="let item of deals.amazon_data"
<ng-container *ngFor = "let item of deals">
<tr *ngFor="let item1 of item.amazon_data">
<td>{{item1.Category}}</td>
...
</ng-container>希望这能有所帮助!
https://stackoverflow.com/questions/57220473
复制相似问题