我有一個搜索文本框，當我點擊那個搜索圖示并搜索一些值 api 將回傳結果，這將是一些資料集，比如它可能回傳 10 資料或 5 資料它可能會有所不同，我將在 ngfor 中顯示所需的詳細資訊瓷磚。所以我的要求是，如果我有更多的資料，比如來自 api 的 18 個結果，我不想向用戶顯示所有資料。我只想顯示前 10 個資料，我將在頁面中顯示更多標簽。如果我點擊它，它應該顯示剩余的資料集，直到回應的長度。但我不想再次呼叫 api 來顯示剩余的資料集。任何幫助表示贊賞。
您可以在此處找到我的回應
并且，當您單擊按鈕時，您將全部顯示它們：
uj5u.com熱心網友回復：
抱歉，根據您之前的描述，我不明白您的情況。其他解決方案。我可以像這樣定義切片管道來切片陣列。
import {Pipe, PipeTransform} from '@angular/core';
@Pipe({
name: 'sliceItems'
})
export class SliceItemsPipe implements PipeTransform {
transform(items: any[], start?: number, end?: number): any {
if (!items) {
return [];
}
if (!start && start !== 0) {
return items;
}
if (!end) {
return items.slice(start, items.length - 1);
}
return items.slice(start, end);
}
}
就我而言，我使用屬性來控制需要顯示所有標簽的專案：
showMoreItem = -1
然后，在您的 html 中：
<div fxLayout fxLayoutAlign="space-between center">
<mat-chip-list>
<ng-template [ngIf]="showMoreItem !== item?.id">
<mat-chip *ngFor="let c of items | sliceItems : 0:5"
class="ok">
{{c | titlecase}}
</mat-chip>
</ng-template>
<ng-template [ngIf]="showMoreItem === item?.id">
<mat-chip *ngFor="let c of items" class="ok">
{{c | titlecase}}
</mat-chip>
</ng-template>
</mat-chip-list>
<button *ngIf="items?.length > 5" class=" mr-3 mt-1 mb-1" color="test"
mat-mini-fab>
<mat-icon (click)="showMoreItem = item?.id"
*ngIf="items?.length > 5 && showMoreItem !== item?.id"
class="mat-18 "
matTooltip="Show more Concepts">keyboard_arrow_down
</mat-icon>
<mat-icon (click)="showMoreItem = -1" *ngIf="showMoreItem === item?.id"
class="mat-18"
matTooltip="Hide Concepts>keyboard_arrow_up
</mat-icon>
</button>
</div>
您只能使用一個 ngTemplate 來使用對切片變數的參考，當您單擊 MORE 標簽時，該變數會獲取陣列的大小，而 slicePipe 將回傳完整專案。有任何疑問寫信給我。
我希望它的幫助。
uj5u.com熱心網友回復：
我解決了我的問題，而不是每次都呼叫回應。我喜歡這個
this.finalResult = response.CongnitiveSearchResult.value;
if (response.CongnitiveSearchResult.value.length > 8) {
this.resultList = response.CongnitiveSearchResult.value.slice(0, 9);
this.isShowMore = true;
this.isShowLess = false;
}
else {
this.resultList = response.CongnitiveSearchResult.value;
this.isShowMore = false;;
this.isShowLess = false;
}
點擊顯示更多后會發生 showResults() { this.resultList = this.finalResult.slice();
一旦達到最后一組，我就會顯示隱藏更少的按鈕我正在檢查是否通過這樣做達到了最后一組
this.resultList[this.resultList.length - 1]
如果這是真的那么我顯示隱藏更少如果我點擊隱藏更少這將被呼叫
hideResults() {
this.resultList = this.finalResult.slice(0,9);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/317143.html