Angular * ngFor отображает только часть массива

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

Используйте угловую slice трубу ( документы ):

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

Answer 2

Вы можете использовать для этого канал, который проверяет либо размер вашего пользовательского экрана, либо пользовательское устройство.

// 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) }
}

Преимущества использования канала:

1. Вы не трогаете свои данные, только то, как вы их отображаете
2. Логика дисплея незагрязнение логики вашего компонента
3. Вы можете использовать его на любом компоненте, который вам нужен, без дублирования кода
4. Вы можете параметризовать его аргументами

Answer 3

Вы можете просто использовать метод получения.

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

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