不同类型的分页取决于 Angular 12 上的设备类型答案

【问题标题】：Different types of paging depending on the type of device on angular 12不同类型的分页取决于 Angular 12 上的设备类型
【发布时间】：2022-02-03 06:01:04
【问题描述】：

美好的一天，我需要为一张表做 2 个分页，我的表中有 20 行：

第一个分页在桌面，我显示10行，在第一页我的分页，第二页是其他 10 行。
第二个是在移动端，我只需要在第一页显示 3 行，在第二页也有 3 行，所以，直到完成 10 次注册。

我使用 ngx-pagination 来进行分页。

感谢您的帮助。

这是我的代码：

Combinations.components.ts

// model
import {Combinations} from '../../models/Combinations.model';

@Component({
  selector: 'app-results',
  templateUrl: './results.component.html',
  styleUrls: ['./results.component.css']
})
export class ResultsComponent implements OnInit {

  combinations: Combinations[] = [];
  p: number = 1;

  @Input('data')
    set data( data:any){
      this.combinations = data;
    }

  constructor(
  ) { }

  ngOnInit(): void {
  }
}

Combinations.components.html

<!-- table -->
<table class="nkn-table nkn-vertical" >
    <thead>
        <tr>
            <th>n°</th>
            <th>Model</th>
            <th>Skus</th>
            <th>Description</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let combination of combinations | paginate: { itemsPerPage: 10, currentPage: p } , let i=index">
            <td data-title="n°">{{ 10 * (p - 1) + i  + 1}}</td>            
            <td data-title="model">{{combination.model}}</td>
            <td data-title="skus">{{combination.skus}}</td>
            <td data-title="description">{{combination.description}}</td>
            <td data-title="price">{{combination.price}}</td>
        </tr>
    </tbody>
</table>
<!-- table end -->

<!-- pagination -->
<pagination-controls (pageChange)="p = $event"></pagination-controls>

products.compoments.html

       .
       .
       .
 <div class="rc-table-container">
            <!-- table -->
            <app-results  [data]="data"></app-results>
 </div>

【问题讨论】：

标签： angular ngx-pagination

【解决方案1】：

它只使用一个变量，例如行并在管道中使用

<tr *ngFor="let combination of combinations | paginate: 
         { itemsPerPage: rows, currentPage: p } >
 ....
</tr>

您不需要根据桌面或移动设备更改变量“行”。那么你可以使用像这样的SO 或直接使用导航器

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
  this.rows=3;
}else{
  this.rows=10
}

或者你可以检查一下“屏幕”的宽度

if (window.innerWidth<600){ //Imagine that less than 600 only show 3
  this.rows=3;
}else{
  this.rows=10
}

你也可以顺便使用fromEvent rxjs操作符

  resize$=fromEvent(window, 'resize').pipe(
    startWith({ target: { innerWidth: window.innerWidth } }),
    map((e: any) => (e.target.innerWidth > 600?10:3))
  )

并使用

<tr *ngFor="let combination of combinations | paginate: 
         { itemsPerPage: resize$|async, currentPage: p } >
 ....
</tr>

当屏幕改变大小时

【讨论】：