不同類型的分頁取決於 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>

當屏幕改變大小時