Angular中如何基于sM数组长度为ngFor渲染的div批量调整尺寸？

• 重复id直接导致查找失效：*ngFor渲染时，你给每一个循环div都绑定了完全固定的id="product"，最终页面上会出现多个重复id的元素。而document.getElementById()的原生逻辑是，只会返回DOM树里第一个匹配该id的元素，因此无论你写的尺寸调整逻辑跑多少次，都只能修改第一个渲染出来的div，完全触达不到后面的同id元素。
• 原生DOM操作不符合Angular开发逻辑：你现在的写法是绕过Angular的模板体系，直接用原生API改样式，不仅容易因为DOM渲染时序问题出现样式不生效的bug，还会因为ChangeHeigth()被挂在[ngClass]上，每次组件变更检测触发就反复执行，平白增加性能损耗。
• 逻辑设计冗余：你的高度调整触发条件是sM数组的整体长度在4-6区间，这是作用于所有循环div的全局规则，完全不需要把判断逻辑挂在每一个循环元素上重复跑。

推荐方案：纯Angular响应式实现，完全不用手动找DOM #

这是最适配Angular开发习惯的写法，不需要你手动遍历元素，所有渲染出的div都会自动同步调整尺寸，从根本上避免id冲突带来的问题：

1. 先把模板里循环元素上重复的固定id="product"删掉，彻底消除id冲突的根源。
2. 在组件类里定义一个计算属性，统一返回匹配条件时需要加的类名，替代原来绑在ngClass上反复执行的方法：

   // 组件类内部写这个计算属性
   get sizeClassMap() {
     // 判断sM长度是不是在4-6的目标区间
     const isTargetRange = this.sM.length > 3 && this.sM.length < 7;
     // 这个对象的格式完全适配ngClass的绑定要求：键是类名，值决定是否应用这个类
     return {
       'card-adj-height': isTargetRange,
       'card-default-height': !isTargetRange
     };
   }
   

3. 在组件的样式文件里定义对应的尺寸规则，把高度逻辑从TS代码里挪到CSS里，更符合样式逻辑归CSS管的原则：

   /* 满足条件时的调整后高度 */
   .card-adj-height {
     height: 55%;
   }
   /* 原有默认高度，把你之前的默认值填进来就行 */
   .card-default-height {
     /* 例如: height: 100% */
   }
   

4. 改模板的绑定逻辑，把原来的[ngClass]="ChangeHeigth()"换成上面的计算属性绑定就行，模板内部的其他内容完全不用动：

   <div 
     class="col-4" 
     *ngFor="let sm of sM" 
     [ngClass]="sizeClassMap"
   >
     <img class="img2" src="assets/images/xx/xxx.svg" alt="">
     <img class="img1" src="assets/images/xx/xxx.svg" alt="">
     <h5>{{sm.name}}</h5>
     <p>{{sm.res}}</p>
     <button routerLink="/product_detail"><span>+ Info</span></button>
   </div>
   

这种写法跑通的逻辑是：只要sM的长度满足4-6的条件，所有被*ngFor渲染出来的div都会自动加上card-adj-height类，应用55%的高度，完全不会出现只改第一个元素的问题，而且完全走Angular的原生变更检测机制，没有多余的性能开销。

补充说明 #

如果你确实需要通过DOM操作完成更复杂的样式调整，也不建议继续用getElementById查找元素，可以用Angular提供的@ViewChildren装饰器拿到所有循环div的元素引用，在满足条件时统一修改样式，但这种写法相比类绑定的方式冗余度更高，只有在必须操作原生DOM的特殊场景才建议用。

内容的提问来源于stack exchange，提问作者João Freitas