Angular *ngFor如何按设备显示指定数量的数组元素？

你的核心需求是保留所有数组元素在DOM中（方便后续做滑块），同时在不同屏幕尺寸下只显示指定数量的元素对吧？*ngFor完全能做到，关键是用视觉隐藏而非删除DOM元素的方式来实现响应式控制，下面给你两种实用方案：

方案一：纯CSS媒体查询（最推荐，无TS逻辑） #

这种方式最简单，所有元素都会被*ngFor渲染到DOM里，只是通过容器的宽度和overflow属性，让超出部分视觉上隐藏，完美适配后续滑块功能。

修改后的HTML #

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

对应的CSS #

/* 基础滑块容器样式 */
.slider-container {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden; /* 隐藏超出容器的元素 */
  gap: 1rem; /* 元素之间的间距，可根据需求调整 */
}

/* 移动端：每个item占25%宽度（刚好显示4个） */
.slider-item {
  flex: 0 0 auto; /* 固定宽度，不收缩 */
  width: calc(25% - 0.75rem); /* 减去gap的影响，保证总宽度适配 */
}

/* 桌面端断点（这里用768px，你可以根据自己的设计调整） */
@media (min-width: 768px) {
  .slider-item {
    width: calc(16.666% - 0.833rem); /* 6个item，每个占约16.66%宽度 */
  }
}

原理：所有li元素都存在于DOM中，只是容器的overflow:hidden把超出可视区域的部分藏起来了，后续做滑块时（不管是自己写拖动逻辑还是用第三方库），直接操作容器的滚动或者滑块逻辑即可，完全不受影响。

方案二：Angular BreakpointObserver 动态控制（适合复杂逻辑场景） #

如果需要在不同断点下做更多自定义操作（比如同时修改其他组件状态），可以用Angular的BreakpointObserver来监听屏幕尺寸，动态给元素添加类来控制显示。

修改后的TS代码 #

import { Component, OnInit } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  items = Array.from({length:10}, (_,i) => `Item ${i+1}`); // 示例数组
  isMobileView = false;

  constructor(private breakpointObserver: BreakpointObserver) {}

  ngOnInit(): void {
    // 监听移动端断点
    this.breakpointObserver.observe(Breakpoints.Handset)
      .subscribe(breakpointState => {
        this.isMobileView = breakpointState.matches;
      });
  }
}

修改后的HTML #

<div class="container">
  <ul class="slider-container">
    <li *ngFor="let item of items; let index = index" 
        [class.visually-hidden]="isMobileView && index >= 4 || !isMobileView && index >= 6"
        class="slider-item">
      <div class="producers">{{ item }}</div>
    </li>
  </ul>
</div>

对应的CSS #

.slider-container {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 1rem;
}

.slider-item {
  flex: 0 0 auto;
}

/* 移动端item宽度 */
@media (max-width: 767px) {
  .slider-item {
    width: calc(25% - 0.75rem);
  }
}

/* 桌面端item宽度 */
@media (min-width: 768px) {
  .slider-item {
    width: calc(16.666% - 0.833rem);
  }
}

/* 视觉隐藏但保留DOM位置（不推荐用display:none，会破坏滑块布局） */
.visually-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

这种方式会保留所有元素的DOM位置，只是隐藏视觉效果，同样能支持滑块功能，适合需要结合其他业务逻辑的场景。

关键总结 #

• 完全不需要用slice，因为slice会直接从DOM中删除元素，后续滑块无法访问这些元素；
• *ngFor负责遍历所有元素，响应式显示交给CSS或Angular的断点监听来控制，完美兼顾DOM完整性和视觉需求。

内容的提问来源于stack exchange，提问作者Jakub Matwiejew