Question

我有一个要隐藏或显示基于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的输出

Answer 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>

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

1 个答案: