Чтобы ограничить данные JSON фиксированной длиной

Question

У меня есть JSON файл с именем customers, как показано ниже:

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

Попробуйте это:

<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;
  }

Вот рабочий пример

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

Попробуйте это,

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 5

Я бы использовал 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>

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

Вам необходимо обновить ваш компонент как:

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