将JSON数据限制为固定长度

Question

我有一个名为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 ，我需要执行两项操作：

• 在加载component时，我需要仅显示 JSON的第1个对象（即客户1和2），如下所示：

• 点击Show more按钮时，应显示剩余的对象（即所有4个客户），如下所示：

Stackblitz DEMO

Answer 1

在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>

Answer 2

尝试一下

export class AppComponent  {
  customers: ICustomer[];
  topCust = [];

  constructor(private myService: ContactService) {}

  ngOnInit() {
    this.myService.getCustomers()
      .subscribe(res => {
        this.customers = res;
        this.topCust.push(this.customers[0]);
        this.topCust.push(this.customers[1]);
        });
  }

  showMore() {
    this.topCust = this.customers;
  }



}

在HTML

<h4>Customers</h4>
<div class="cust-detail" *ngFor="let customer of topCust">
<p>{{customer.name}}</p>
</div>
<button (click)="showMore()">Show More</button>

Answer 3

维护showMode并使用它来控制shownCustomers，例如

  shownCustomers: ICustomer[] = [];
  showMode: 'start'|'all' = 'start';

  constructor(private myService: ContactService) {}

  ngOnInit() {
    this.myService.getCustomers()
      .subscribe(res => {
        this.customers = res as any;
        this.updateShownCustomers();
      });
  }

  updateShownCustomers(){
    this.shownCustomers = this.showMode == 'all' ? this.customers : this.customers.slice(0,2);
  }

  toggle(){
    this.showMode = this.showMode == 'all' ? 'start' : 'all';
    this.updateShownCustomers();
  }

工作示例

https://stackblitz.com/edit/angular-movie-read-load-json-sample-eg-hvunyk

更多

您还可以使用它为show more / show less逻辑提供动力。

Answer 4

尝试一下：

<h4>Customers</h4>

<ng-container *ngFor="let customer of customers;  let i=index">
  <p *ngIf="i<filterItems">{{customer.name}}</p>
</ng-container>
<button *ngIf="filterItems == 2" (click)="showMore()">Show More</button>
<button *ngIf="filterItems == 4" (click)="showLess()">Show Less</button>

在组件中：声明

  filterItems = 2;


  showMore(){
    this.filterItems = 4;
  }


  showLess(){
    this.filterItems = 2;
  }

这是工作中的example

Answer 5

您需要将组件更新为：

export class AppComponent  {
  customers: ICustomer[];
  showLimit = 2;
  stubArray = Array(this.showLimit).fill(1);

  constructor(private myService: ContactService) {}

  ngOnInit() {
    this.myService.getCustomers()
      .subscribe(res => {
        this.customers = res as ICustomer[];
        this.stubArray = Array(this.showLimit).fill(1);
      });
  }

  showTwoMore() {
    this.showLimit += 2;
    this.stubArray = Array(this.showLimit).fill(1);
  }
}

然后您的模板为：

<h4>Customers</h4>
<div class="cust-detail" *ngFor="let num of stubArray; let idx = index">
<p>{{customers[idx].name}}</p>
</div>
<button (click)="showTwoMore()">Show More</button>

上面的代码中需要查找的关键内容是：

1. stubArray-长度为2的倍数的简单数组
2. showTwoMore-将stubArray长度增加2的方法

使用一种简单的方法完成。请看一下正在工作的堆栈闪电战：

https://stackblitz.com/edit/angular-movie-read-load-json-sample-eg-azzgx5

Answer 6

另一个

<ng-container *ngFor="let customer of customers.slice(0,more?customers.length:2);  let i=index">
  <p >{{customer.name}}</p>
</ng-container>
<button (click)="more=true">Show More</button>
<button (click)="more=false">Show Less</button>

Answer 7

我会使用CSS

<div class="cust-container" [class.more]="more">
    <div class="cust-detail" *ngFor="let customer of topCust">
        <p>{{customer.name}}</p>
    </div>
</div>
<button (click)="more = !more">{{ more ? 'Show Less' : 'Show More'}}</button>

.cust-container > div {
  display: none;
}

.cust-container.more > div, .cust-container > div:nth-child(0), .cust-container > div:nth-child(1) {
  display: block;
}

另一个没有CSS的解决方案

<div class="cust-container" [class.more]="more">
    <div class="cust-detail" *ngFor="let customer of topCust" [hidden]="!more && index > 1">
        <p>{{customer.name}}</p>
    </div>
</div>
<button (click)="more = !more">{{ more ? 'Show Less' : 'Show More'}}</button>