Question

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

如何实现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"} ]

}

Answer 1

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

Here is a StackBlitz demo

Answer 2

据我了解，如果您的下一个功能正常工作，则可以使用以下上一个功能：

In Your .ts file

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 < 0)
              {
               this.n = 0;
               this.m = 1;
              }
          }

Replace your previous html click function : 

(click)="prevsItem" 

With this :

(click)="prevItem()"

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

2 个答案: