在我的專案中，我有 12 個按點排名的頂級用戶，我從 api 休息中得到了他們。
我創建了 2 個按鈕（showMor）和（showLess）。
所以在我的代碼中，默認情況下前三個用戶出現在串列中，當我單擊按鈕顯示更多三個用戶添加到第一個用戶時，每次我按下按鈕顯示更多三個用戶添加到最后（12 個用戶）。反之亦然，當按下按鈕顯示時，從串列中減少三個用戶......
問題是當我按 showmore 按鈕 4 次時，我擁有所有 12 個用戶，但是當我第五次、第六次、第七次單擊此按鈕時，它為其他用戶添加的空間不存在，對于當我第一次單擊此按鈕時，按鈕不顯示，他隱藏前三個用戶默認出現在串列中。
我想為兩個按鈕創建一個條件：
當我單擊按鈕顯示時，我不希望它隱藏前三個用戶。
當我單擊按鈕 showmore 時，我不希望它在分配給 12 個用戶的空間中添加更多空間。
代碼html：
<div class="col-md-6 text-center">
<h2><strong>TOP 12 FANS</strong></h2>
<div *ngFor="let top of top2" class="rank" style="width: 74%;">
<div class="data-row">
<div class="row-user">
<div class="col-lg-4 col-md-7 col-sm-7 col-7">
<div class="rank-row">
<span class="logo-wrapper ">
<img src={{top.photoUrl}}>
</span>
<div class="td-wrap"><a class="uni-link">{{top.firstname}} {{top.familyname}}</a>
</div>
<div class="location "> <img width="10px" src="../assets/localisation.png">
france</div>
</div>
</div>
<div
class="col-lg-4 offset-lg-0 col-md-12 offset-md-0 col-sm-11 offset-sm-1 text-center">
<span><img width="25px" src="../assets/golden.png"> {{top.point}} PT</span>
</div>
</div>
</div>
<button (click)="showMore()">show more</button>
<button (click)="showLess()">show less</button>
</div>
代碼 ts：
import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
top2 = [];
result = [];
i=0;
perChunk = 3;
constructor(private apiService: ApiService) { }
ngOnInit() {
this.getTop2();
}
getTop2() {
this.apiService.gettop2().subscribe((res: []) => {
var inputArray = res;
this.result = inputArray.reduce((resultArray, item, index) => {
const chunkIndex = Math.floor(index/this.perChunk)
if(!resultArray[chunkIndex]) {
resultArray[chunkIndex] = [] // start a new chunk
}
resultArray[chunkIndex].push(item)
return resultArray
}, [])
this.top2 = this.result[0];
console.log(res)
});
}
showMore() {
this.i ;
this.top2 = this.top2.concat(this.result[this.i])
console.log(this.top2)
}
showLess() {
this.i--;
let length = this.top2.length;
this.top2.length = length-this.perChunk;
}
}
uj5u.com熱心網友回復：
你為什么不喜歡：
<button *ngIf="i<3" (click)="showMore()">show more</button>
<button *ngIf="i>0" (click)="showLess()">show less</button>
讓我知道這是否解決了您的問題
uj5u.com熱心網友回復：
您可以在函式中添加條件。
showMore() {
if(i>=this.result.length-1){
return;
}
this.i ;
this.top2 = this.top2.concat(this.result[this.i])
console.log(this.top2)
}
showLess() {
if(i<=0){
return;
}
this.i--;
let length = this.top2.length;
this.top2.length = length-this.perChunk;
}uj5u.com熱心網友回復：
<button *ngIf="i<result.length-1" (click)="showMore()">show more</button>
<button *ngIf="i>0" (click)="showLess()">show less</button>如果您想在沒有更多/更少的情況下隱藏按鈕，如果沒有更多用戶隱藏更多按鈕，如果沒有更少，則隱藏顯示更少按鈕。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/433930.html
標籤：javascript html 有角度的 打字稿