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

【问题标题】：Angular *ngFor displays only part of arrayAngular *ngFor 仅显示数组的一部分
【发布时间】：2018-04-26 17:46:06
【问题描述】：

我想在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 文件中使用它？

干杯，

库巴

【问题讨论】：

您可以使用管道过滤值。

标签： angular

【解决方案1】：

使用 Angular slice 管道 (docs)：

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

【讨论】：

【解决方案2】：

你可以只使用 getter 方法。

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

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

【讨论】：

【解决方案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) }
}

使用管道的好处：

您不会触碰您的数据，只是您如何显示它们
显示逻辑没有污染组件的逻辑
您可以在所需的每个组件上使用它，而无需复制代码
您可以使用参数对其进行参数化

【讨论】：