不同类型的分页取决于 angular 12 上的设备类型

Question

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

• 第一个分页在桌面上，我显示 10 行，在我的分页的第一页中，在第二页中显示其他 10 行。

• 第二个是在移动设备中，我只需要显示 3 行，在第一页，在第二页也是 3 行，所以，直到完成 10 个注册。

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

我感谢您的所有帮助。

这是我的代码：

组合.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>

产品.compoments.html

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

Answer 1

它仅使用变量，例如行并在 pipe 中使用

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

当屏幕改变大小时