代码之家 › 专栏 › 技术社区 › Virendra Pandey

从对象数组打印One object属性并在angular5中执行previous和next

angular-cli typescript angular json html

Virendra Pandey · 技术社区 · 8 年前

我怎样才能做到 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() {
          }

        }

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

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"} ]

}

2 回复 | 直到 8 年前

user184994 8 年前

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

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

在 prevItem

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

Shashikant Devani 8 年前

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

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()"