Angular中如何用*ngFor将数组元素分别渲染到540px和260px的div中？

安全阿岳

2026-8-22

解决方法

方案1：拆分首个元素与剩余元素

最直观的方式是单独渲染第一个元素，剩下的元素用*ngFor循环处理，逻辑清晰且易于维护：

<!-- 处理第一个元素，容器宽度540px -->
<div style="width: 540px;" *ngIf="populars.length">
  <div class="smallCard">
    <!-- 填充第一个元素的内容，比如 {{ populars[0].title }} -->
    {{ populars[0].content }}
  </div>
</div>

<!-- 循环渲染剩下的元素，容器宽度260px -->
<div style="width: 260px;" *ngFor="let item of populars.slice(1)">
  <div class="smallCard">
    {{ item.content }}
  </div>
</div>

说明：populars.slice(1)会返回从第二个元素开始的子数组，确保循环不会包含第一个元素。*ngIf="populars.length"用来避免数组为空时渲染空容器。

方案2：在*ngFor中通过索引动态控制宽度

如果希望在同一个循环里完成，可以利用*ngFor提供的索引变量，根据索引判断设置容器宽度：

方式A：内联样式直接设置

<div *ngFor="let item of populars; let i = index" 
     [style.width]="i === 0 ? '540px' : '260px'">
  <div class="smallCard">
    {{ item.content }}
  </div>
</div>

方式B：用CSS类控制（推荐，样式与结构分离）

先定义CSS类：

.popular-large { width: 540px; }
.popular-small { width: 260px; }

然后在模板中使用：

<div *ngFor="let item of populars; let i = index" 
     [ngClass]="i === 0 ? 'popular-large' : 'popular-small'">
  <div class="smallCard">
    {{ item.content }}
  </div>
</div>

说明：let i = index会获取当前元素的索引，第一个元素索引为0，判断后应用对应的宽度或类名。