我需要在每個卷軸中每頁顯示 4 個專案。現在我最初顯示 4 個專案，但是當頁面滾動時，我顯示了所有其余的專案。我怎樣才能實作每個卷軸只有 4 個專案？我嘗試使用 slice 但無法執行該概念。我正在使用 angular 和 ngx 無限滾動包。
成分
import {
Component, OnInit
} from '@angular/core';
import { APIService } from 'src/app/services/api.service';
@Component({
selector: 'app-categories',
templateUrl: './categories.component.html',
styleUrls: ['./categories.component.css']
})
export class CategoriesComponent implements OnInit {
isBottom = false
names = []
allProducts = []
categories: any = []
constructor(
private apiService: APIService
) { }
ngOnInit() {
this.getProductsData()
}
getProductsData() {
this.apiService.GetProductData()
.subscribe((response: any) => {
response.forEach((product: any, index: number) => {
if(index < 4) this.categories.push(product)
})
this.names = response.map((product: any) => product.title)
},
err => console.log(err))
}
onScroll() {
console.log('SCROLLED')
this.apiService.GetProductData()
.subscribe((response: any) => {
this.categories = response
this.isBottom = true
console.log(this.categories)
},
err => console.log(err))
}
}
模板
<div class="container-fluid">
<div class="row min-vh-100">
<div class="col-12">
<header class="row">
<app-top-nav></app-top-nav>
<app-header [inputData]="names"></app-header>
</header>
</div>
<div class="col-12">
<main class="row">
<div class="col-12">
<div class="row">
<div class="col-12 py-3">
<div class="row">
<div class="col-12 text-center text-uppercase">
<h2>Computers</h2>
</div>
</div>
<div class="row">
<div *ngFor="let cat of categories" class="item" style="width:300px; float:left;">
<div>
<div>
<div>
<a href="product.html">
<img src="{{cat.image}}" alt="x" class="img-fluid">
</a>
</div>
<div class="col-12 mb-3">
<a href="product.html" class="product-name">{{cat.title}}</a>
</div>
<div class="col-12 mb-3">
<span class="product-price-old">
</span>
<br>
<span class="product-price">
</span>
</div>
<div class="col-12 mb-3 align-self-end">
<button class="btn btn-outline-dark" type="button"><i
class="fas fa-cart-plus me-2"></i>Add to cart</button>
</div>
</div>
</div>
<br />
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<h4 *ngIf="isBottom" style="text-align: center; color: black;">That's it. thanks for reading</h4>
<div class="col-12 align-self-end">
<app-footer></app-footer>
</div>
</div>
</div>
<div class="search-results" infiniteScroll [infiniteScrollDistance]="2"
[infiniteScrollThrottle]="50" (scrolled)="onScroll()"></div>
uj5u.com熱心網友回復：
我將編輯您的代碼如下。您需要添加page變數，page并將perPage值傳遞給后端。因此，每次向下滾動到最后時，onScroll 函式都會向頁面變數添加 1 并加載接下來的 4 個產品。您還需要編輯后端端點以支持此功能。
import {
Component, OnInit
} from '@angular/core';
import { APIService } from 'src/app/services/api.service';
@Component({
selector: 'app-categories',
templateUrl: './categories.component.html',
styleUrls: ['./categories.component.css']
})
export class CategoriesComponent implements OnInit {
isBottom = false
names = []
page = 1,
allProducts = []
categories: any = []
constructor(
private apiService: APIService
) { }
ngOnInit() {
this.getProductsData()
}
getProductsData() {
this.apiService.GetProductData({page: this.page, per_page: 4})
.subscribe((response: any) => {
response.forEach((product: any, index: number) => {
this.categories.push(product)
})
this.names = response.map((product: any) => product.title)
},
err => console.log(err))
}
onScroll() {
this.page ;
this.apiService.GetProductData({page: this.page, perPage: 4})
.subscribe((response: any) => {
response.forEach((product: any) => this.categories.push(product));
this.isBottom = true
},
err => console.log(err))
}
}
如果你想在前端管理這個
我只建議你有少量產品，比如不超過100個。你可以第一時間拿到所有產品，然后在模板中切片。
import {
Component, OnInit
} from '@angular/core';
import { APIService } from 'src/app/services/api.service';
@Component({
selector: 'app-categories',
templateUrl: './categories.component.html',
styleUrls: ['./categories.component.css']
})
export class CategoriesComponent implements OnInit {
isBottom = false
names = []
page = 1,
allProducts = []
categories: any = []
constructor(
private apiService: APIService
) { }
ngOnInit() {
this.getProductsData()
}
getProductsData() {
this.apiService.GetProductData()
.subscribe((response: any) => {
response.forEach((product: any, index: number) => {
this.categories.push(product)
})
this.names = response.map((product: any) => product.title)
},
err => console.log(err))
}
onScroll() {
this.page ;
}
<div class="container-fluid">
<div class="row min-vh-100">
<div class="col-12">
<header class="row">
<app-top-nav></app-top-nav>
<app-header [inputData]="names"></app-header>
</header>
</div>
<div class="col-12">
<main class="row">
<div class="col-12">
<div class="row">
<div class="col-12 py-3">
<div class="row">
<div class="col-12 text-center text-uppercase">
<h2>Computers</h2>
</div>
</div>
<div class="row">
<div *ngFor="let cat of categories.slice(page * 4 - 4, page * 4)" class="item" style="width:300px; float:left;">
<div>
<div>
<div>
<a href="product.html">
<img src="{{cat.image}}" alt="x" class="img-fluid">
</a>
</div>
<div class="col-12 mb-3">
<a href="product.html" class="product-name">{{cat.title}}</a>
</div>
<div class="col-12 mb-3">
<span class="product-price-old">
</span>
<br>
<span class="product-price">
</span>
</div>
<div class="col-12 mb-3 align-self-end">
<button class="btn btn-outline-dark" type="button"><i
class="fas fa-cart-plus me-2"></i>Add to cart</button>
</div>
</div>
</div>
<br />
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<h4 *ngIf="isBottom" style="text-align: center; color: black;">That's it. thanks for reading</h4>
<div class="col-12 align-self-end">
<app-footer></app-footer>
</div>
</div>
</div>
<div class="search-results" infiniteScroll [infiniteScrollDistance]="2"
[infiniteScrollThrottle]="50" (scrolled)="onScroll()"></div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/342729.html
標籤：javascript 有角的