根据angular2中的第一个div和最后一个div显示或隐藏上一个和下一个按钮

Posted 2023-02-25

【中文标题】根据angular2中的第一个div和最后一个div显示或隐藏上一个和下一个按钮

【英文标题】：Show or Hide Prev and next buttons based on first div and last div in angular2

【发布时间】：2018-06-26 15:49:56

【问题描述】：

我有一个要求，我想根据 div 标签隐藏或显示上一个和下一个按钮。基本上我在angular2中使用ngfor循环为列表的每个值创建div标签。

我用过的清单

appUlist:string[] = ["Calculus-1","Geometry-1","Algebra-1","Trignometry-1","Statstics-1","Arithmetic-1"]

现在我正在使用 html 中的 ngFor 为列表中的每个值创建一个 div 标签。由于列表中有超过 5 个值，因此我使用了 next 和 prev 按钮，以便在单击 next 按钮时可以看到其他 div 标签。这部分工作得很好。但是如果我显示第一个 div 标签，我想隐藏上一个按钮，如果没有更多的 div 标签，我想隐藏下一个按钮。

请在这方面给我建议 下面我已经发布了html和ts代码

    export class AppComponent
      @ViewChild('panel',  read: ElementRef ) public panel: ElementRef<any>;
     public selectedDiv;
     public u;
      title = 'app';
      name:string = 'Creating new screen for student';

     public appUlist:string[] = ["Calculus-1","Geometry-1","Algebra-1","Trignometry-1","Statstics-1","Arithmetic-1"]
     
//scrolls back when clicked on prev
    public onPreviousSearchPosition(): void 
      this.panel.nativeElement.scrollLeft -= 20
    
 //scrolls forward when clicked on next button     
      public onNextSearchPosition(): void 
     this.panel.nativeElement.scrollBy(20,0);
     

我的html代码

         <div #panel class="row" style="width:700px;height:300px;overflow-x: scroll;overflow: hidden;" >
        <div class="col-lg-1">
 <i class="fa fa-angle-double-left" style="font-size:36px;color:#1092B0" id="left" (click)="onPreviousSearchPosition()"></i>
</div>  
        <div class="col-lg-1 cardhover" *ngFor="let u of appUlist">
                    <h1>test</h1> 
         </div>
<div class="col-lg-1">
    <i class="fa fa-angle-double-left" style="font-size:36px;color:#1092B0" id="right" (click)="onNextSearchPosition()"></i>
</div>
    </div>

下图代表mycode的输出

【参考方案1】：

您可以在您的 appComponent 中将变量设置为 0，并在每次单击 prev 和 next 时递增/递减它。如果这个变量是 == 0 你不显示上一个按钮，如果它等于你的列表长度 - 3 你不显示下一个按钮：

export class AppComponent
      @ViewChild('panel',  read: ElementRef ) public panel: ElementRef<any>;
     public selectedDiv;
     public u;

     public index = 0;
      title = 'app';
      name:string = 'Creating new screen for student';

     public appUlist:string[] = ["Calculus-1","Geometry-1","Algebra-1","Trignometry-1","Statstics-1","Arithmetic-1"]
     
//scrolls back when clicked on prev
    public onPreviousSearchPosition(): void 
      this.panel.nativeElement.scrollLeft -= 20
      this.index--;
    
 //scrolls forward when clicked on next button     
      public onNextSearchPosition(): void 
     this.panel.nativeElement.scrollBy(20,0);
      this.index++;
     

和

 <div #panel class="row" style="width:700px;height:300px;overflow-x: scroll;overflow: hidden;" >
        <div class="col-lg-1">
 <i *ngIf="idx != 0" class="fa fa-angle-double-left" style="font-size:36px;color:#1092B0" id="left" (click)="onPreviousSearchPosition()"></i>
</div>  
        <div class="col-lg-1 cardhover" *ngFor="let u of appUlist">
                    <h1>test</h1> 
         </div>
<div class="col-lg-1">
    <i *ngIf="idx < list.lenght - 3" class="fa fa-angle-double-left" style="font-size:36px;color:#1092B0" id="right" (click)="onNextSearchPosition()"></i>
</div>
    </div>

【讨论】：

感谢您的回复。您已经提到要检查索引是否等于列表长度。但是如果每次单击下一个按钮时显示多个 div 时，索引将如何等于列表长度

你是对的，你必须检查索引是否低于列表长度 - 3