利用angular ngfor动态调整元素样式
本文探讨如何在Angular应用中，使用ngFor指令根据另一个数组list2来动态修改list数组中特定元素的样式。
方案一：基于索引的直接样式绑定 (适用于简单场景)
如果list和list2具有相同的长度，且需要修改样式的条件依赖于相同索引位置元素的比较，则可以直接在模板中使用索引进行条件判断，并绑定样式类。
例如：假设需要当list[i]和list2[i]相等时，为list[i]对应的元素添加highlight样式类。
<code class="html"><ng-container *ngFor="let item of list; let i = index">
<div [class.highlight]="list[i] === list2[i]">
<div class="room">{{item.nowCall.room}}</div>
<div class="now-name">{{item.nowCall.no}}-{{item.nowCall.patient_name}}</div>
</div>
</ng-container></code>
方案二：预处理数据，简化模板逻辑 (适用于复杂场景)
如果判断条件复杂，或者list和list2的结构不一致，直接在模板中进行判断会使代码难以维护。建议在组件的TypeScript代码中预处理数据，生成一个包含样式信息的新的数组，然后在模板中使用该数组进行遍历。
例如：在组件中创建一个formattedList数组，该数组中的每个元素包含list中对应元素的数据和样式信息。
<code class="typescript">// component.ts
formattedList: any[] = [];
ngOnInit() {
this.formattedList = this.list.map((item, index) => ({
...item,
highlight: this.isHighlighted(item, index) // 自定义判断函数
}));
}
isHighlighted(item: any, index: number): boolean {
// 在此处实现复杂的样式判断逻辑
// 根据item和index以及list2中的数据进行判断，返回true或false
return item.someProperty === list2[index].someOtherProperty; // 例如
}</code>
然后在模板中使用formattedList：
<code class="html"><ng-container *ngFor="let item of formattedList">
<div [class.highlight]="item.highlight">
<div class="room">{{item.nowCall.room}}</div>
<div class="now-name">{{item.nowCall.no}}-{{item.nowCall.patient_name}}</div>
</div>
</ng-container></code>
通过预处理数据，可以有效地分离业务逻辑和视图逻辑，提高代码的可读性和可维护性。 选择哪种方案取决于具体需求的复杂程度。 对于简单的场景，方案一更简洁；对于复杂的场景，方案二更易于维护。
