我有一个名为 customers
的 JSON 文件,如下所示:
customers.json
[
{
"name": "Customer 1",
"id": "01"
},
{
"name": "Customer 2",
"id": "02"
},
{
"name": "Customer 3",
"id": "03"
}
,
{
"name": "Customer 4",
"id": "04"
}
]
对于这个 JSON 我需要执行两个操作:
- 加载
组件
时,我需要像这样只显示 JSON 的第一个两个对象(即客户 1 和 2):
- 点击
Show more
按钮时,它应该会像这样显示剩余的对象(即所有 4 位客户):
最佳答案
在appComponent中声明一个变量
showmore:boolean=false;
在 HTML 中
<div class="cust-detail" *ngFor="let customer of customers; let i =index">
<p *ngIf="!showmore&&(i<=1)">{{customer.name}} </p>
<p *ngIf="showmore">{{customer.name}} </p>
</div>
<button (click)="showmore=!showmore">Show More</button>
关于angular - 将 JSON 数据限制为固定长度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55804741/