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

Posted 2023-03-13

【中文标题】从对象数组中打印 One 对象属性并在 angular5 中执行上一个和下一个

【英文标题】：Printing the One object property from an array of object and perform previous and next in angular5

【发布时间】：2019-01-19 06:39:15

【问题描述】：

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

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

【问题讨论】：

我想你可能想要this.n - 1; 代替this.n + 1; 来代替this.n + 1;

我已经检查过this.n-1 bt not working for previous

【参考方案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

【参考方案2】：

据我了解，如果您的下一个功能运行良好，那么您可以像这样使用 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()"