Question

我想在li标签中打印一系列项目。例如，数组将有10个元素，但我想在移动设备上打印4个，在桌面上打印6个。

我不想使用slice方法删除非打印元素，因为将来它应该是一个滑块。

这是*ngFor的解决方案吗？

这是我的HTML

<div class="container">
  <ul>
    <li *ngFor="let item of items">
      <div class="producers">
        {{ item }}
      </div>
    </li>
  </ul>
</div>

我的TS

export class ProducersComponent implements OnInit {

  items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'];

  innerWidth

  itemsToPrint

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.innerWidth = window.innerWidth;
    if (this.innerWidth < 600) {
      this.itemsToPrint = 4
    } else {
      this.itemsToPrint = 6
    }
  }

  constructor() { }

  ngOnInit() {
    this.onResize(event)
  }
}

我检查窗口大小以更改要打印的项目数。

我如何在HTML文件中使用它？

干杯，

库巴

Answer 1

使用Angular slice管道（docs）：

<li *ngFor="let item of items | slice:0:itemsToPrint+1">

Answer 2

你可以使用getter方法。

_items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'];

get items() {
    return this._items.slice(0, this.itemsToPrint);
}

Answer 3

您可以使用管道来检查用户屏幕的大小或用户设备。

// screen size
transform(items: any): any {
  if (screen.width <= 600) {
    return items.slice(0, 4);
  } else { return items.slice(0, 6) }
}

// device type
transform(items: any): any {
  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    return items.slice(0, 4);
  } else { return items.slice(0, 6) }
}

使用管道的优点：

您无法触摸您的数据，无论您如何展示它们
显示逻辑不会污染您组件的逻辑
您可以在所需的每个组件上使用它，而无需复制代码
您可以使用参数

Angular * ngFor仅显示数组的一部分

3 个答案: