时间戳

首页 > 解决方案 > 从对象数组中打印 One 对象属性并在 angular5 中执行上一个和下一个

html - 从对象数组中打印 One 对象属性并在 angular5 中执行上一个和下一个

问题描述

我在这里为下一个和上一个项目编写了逻辑，但我只得到下一个值，前一个项目的逻辑应该是什么。

我怎样才能实现prevItem和nextItem数组？

        import { Component, OnInit } from '@angular/core';
        import { HttpClient } from '@angular/common/http';

        @Component({
          selector: 'app-emptab',
          templateUrl: './emptab.component.html',
          styleUrls: ['./emptab.component.css']
        })
        export class EmptabComponent implements OnInit
         {
            public customers:any=[];
            public n:number=0;
            public m:number=1;

          constructor(private _http:HttpClient)
           { 
            let url:string="./assets/customer.json";
             this._http.get(url).subscribe((response:any)=>
                {
                  this.customers=response.records;
                }
             );
           }
          public nextItem():void
          {
           this.n=this.n+1;
           this.m=this.m+1;
           if(this.n>this.customers.length)
           {
            this.n=0;
            this.m=1;
           }
          }
          public prevItem():void
          {
             this.n = this.n+1;
             this.m = this.m+1;
             if(this.n>this.customers.length)
              {
               this.n = this.n-1;
               this.m = this.m-1;
              }
          }
          ngOnInit() {
          }

        }

Bellow 是我的 html，用于从对象数组中打印一个对象属性。在这里，我使用 slicePipe 打印数组的第一个索引。

<!-- <link rel="alternate" href="atom.xml" type="application/atom+xml" title="Atom"> -->
<header>
<div style="background-color: blueviolet">
  <h1 align="center">Customer data</h1><hr/>
</div>
</header>
<div class="container mt-3" >
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="javascript:void(0)" (click)="prevsItem">Previous</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)" (click)="nextItem()">Next</a></li>
  </ul> 

    <div class="d" *ngFor="let customer of customers|slice:n:m">
      {{"Name:"+" "+customer.Name}}<br/>
      {{"City:"+" "+customer.City}}<br/>
      {{"Country:"+" "+customer.Country}}
    </div>
</div>

下面是我的 Json customer.json文件： 

{ "records":[

{"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},
{"Name":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"Mexico"},
{"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"}, 
{"Name":"Around the Horn","City":"London","Country":"UK"}, 
{"Name":"B's Beverages","City":"London","Country":"UK"},
{"Name":"Berglunds snabbköp","City":"Luleå","Country":"Sweden"},
{"Name":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"},
{"Name":"Blondel père et fils","City":"Strasbourg","Country":"France"}, 
{"Name":"Bólido Comidas preparadas","City":"Madrid","Country":"Spain"},
{"Name":"Bon app'","City":"Marseille","Country":"France"}, 
{"Name":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"},
{"Name":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"},
{"Name":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"}, 
{"Name":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"}, 
{"Name":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"} ]

}

标签： htmljsonangulartypescriptangular-cli

解决方案

在 html 中，确保在函数调用中添加括号，如下所示：

<a class="page-link" href="javascript:void(0)" (click)="prevItem()">Previous</a>

在prevItem函数中，如果值小于 0，则需要从最后一个元素重新开始，如下所示：

this.n = this.n - 1;
this.m = this.m - 1;
if (this.n < 0) { 
  // We've gone too far, start again from the end
  this.m = this.customers.length;
  this.n = this.m - 1; // We need n to be one lower than m
}

这是一个 StackBlitz 演示

推荐阅读