如何解决如何以角度呈现API数据?
我正在从API中获取一些产品信息,我希望在api上呈现这些信息。这是我目前在组件中获取数据的方式
export class CheckoutComponent {
url = `http://localhost:60036/api/groupProducts`;
items: any = []
constructor(private http: HttpClient) {
this.http.get(this.url).toPromise().then(data => {
console.log(data);
})
}
}
,它返回以下内容
const data = [
{ ProductID: 1,ProductName: 'New phone 1',Price: '600' },{ ProductID: 3,ProductName: 'New phone 2',Price: '200' },{ ProductID: 4,ProductName: 'New phone 3',Price: '400' },];
现在,我在下面的div块中添加了一些硬编码值,但我想根据从api中获取的内容动态填充此列表
<div class="col-25">
<div class="container">
<h4>Cart <span class="price" style="color:black"><i class="fa fa-shopping-cart"></i> <b>4</b></span></h4>
<p><a href="#">Product 1</a> <span class="price">$15</span></p>
<p><a href="#">Product 2</a> <span class="price">$5</span></p>
<p><a href="#">Product 3</a> <span class="price">$8</span></p>
<p><a href="#">Product 4</a> <span class="price">$2</span></p>
<hr>
<p>Total <span class="price" style="color:black"><b>$30</b></span></p>
</div>
</div>
解决方法
<p *ngFor="let product of data"><a href="#">{{product.ProductName}}</a> <span class="price">{{product.ProductPrice}}</span></p>
应该可以解决问题。
,您需要首先在组件中分配数据,然后可以使用* ngFor在UI中显示数据。
<div class="col-25">
<div class="container" *ngFor="let product of products">
<p><a href="#">{{product.ProductID}}/a> <span class="price">{{product.Price}}</span></p>
</div>
</div>
在组件中
export class CheckoutComponent {
url = `http://localhost:60036/api/groupProducts`;
products: any = []
constructor(private http: HttpClient) {
this.http.get(this.url).toPromise().then(data => {
this.products = data;
console.log(data);
})
}
}
但是,如果您要使用标准方法,建议从有角度的位置查找反应形式或模板形式。您还可以使用可观察对象和异步管道来显示数据。
, total = 0;
items: any = []
constructor(private http: HttpClient) {
this.http.get(this.url).toPromise().then(data => {
this.items = data;
for(let i = 0; i < this.items.length; i++){
this.total = this.total + this.items[i].Price;
}
})
}
<h4>Cart <span class="price" style="color:black"><i class="fa fa-shopping-cart"></i> <b>4</b></span></h4>
<p *ngFor="let item of items"><a href="#">{{item.ProductName}}</a><span class="price">{{item.Price}}</span></p>
<hr>
<p>Total <span class="price" style="color:black"><b>${{total}}</b></span></p>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。