Angular ngFor生成额外DOM元素致flex-grow失效，动态元素实现遇阻

问题背景 #

Angular结构指令（如*ngFor）会生成额外DOM元素，导致flex-grow样式无法作用于目标元素。硬编码版本可正常运行，但无法适配动态数量的元素。

解决方法 #

1. 用ng-container消除额外DOM节点 #

ng-container仅作为逻辑容器，不会生成实际DOM元素，可承载*ngFor等指令，确保Flex容器的直接子元素是需要应用flex-grow的目标元素：

<div class="flex-container">
  <ng-container *ngFor="let item of items">
    <div class="flex-item">{{ item }}</div>
  </ng-container>
</div>

2. 样式穿透（兼容旧版本） #

若无法避免额外包装元素，可使用::ng-deep穿透组件样式封装，将flex-grow应用到目标元素：

.flex-container ::ng-deep .flex-item {
  flex-grow: 1;
}

注：::ng-deep在Angular 14+已标记为废弃，建议改用全局样式或调整视图封装策略。

3. 调整组件视图封装 #

将组件的视图封装设为None，使组件样式全局生效，无需穿透即可作用到动态元素：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-flex-demo',
  templateUrl: './flex-demo.component.html',
  styleUrls: ['./flex-demo.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class FlexDemoComponent {
  items = ['元素1', '元素2', '元素3'];
}

4. 直接绑定样式到动态元素 #

通过属性绑定直接为每个动态生成的元素设置flex-grow样式：

<div class="flex-container">
  <div *ngFor="let item of items" [style.flex-grow]="1">
    {{ item }}
  </div>
</div>

核心思路 #

确保Flex容器的直接子节点是需要拉伸的目标元素，避免Angular生成的额外节点占据Flex子项位置；若无法避免额外节点，通过样式策略确保flex-grow能作用到正确元素。

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