Html 从对象数组打印“一个对象”属性，并在angular5中执行“上一个”和“下一个”

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

如何实现数组的

previitem

和

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() {
          }

        }

下面是我的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>

---

根据我的理解，如果您的下一个函数工作正常，那么您可以像这样使用prev函数：

.ts文件中的

public nextItem（）：void
{
这个.n=这个.n+1；
this.m=this.m+1；
if（this.n>this.customers.length）
{
这个。n=0；
这是m=1；
}
}
public previItem（）：void
{
this.n=this.n-1；
this.m=this.m-1；
如果（此.n<0）
{
这个。n=0；
这是m=1；
}
}

替换以前的html单击功能：
（单击）=“prevsItem”
为此：
（单击）=“prevItem（）”

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

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

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
}

---

我想你可能想要

这个.n-1用于上一项，而不是
此项。n+1我已经检查了
这个.n-1
bt在以前的版本中不工作
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
}