不同类型的寻呼取决于 angular 12 上的设备类型

Question

你好，我只需要为一个 table 做 2 个分页，我的 table:

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

Answer 1

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

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

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

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>

当屏幕改变尺寸时

不同类型的寻呼取决于 angular 12 上的设备类型

Different types of paging depending on the type of device on angular 12

angular

ngx-pagination