如何修改ngfor遍历的数据的某一个样式？

Question

<ng-container *ngFor="let item of list">
   <div class="now-box-small">
       <div class="room">
           <span>{{item.nowCall.room}}</span>
       </div>
       <div class="now-name">
           <span class="namesize">
              {{item.nowCall.no}}-{{item.nowCall.patient_name}}
           </span>
       </div>
    </div>
  </ng-container>
  

遍历的list的数据中，我想要改变符合条件的一组数据的字体大小。比如我有另一组数据list2,那怎么选取list与list2相等的数据对应的{{item.nowCall.no}}-{{item.nowCall.patient_name}}的样式，然后修改它的字体大小呢?

求教！！！

Answer 1

你这个想等是怎么定义的.两个list相同下标所对应的两个item,是否存在相等关系?如果是这种

<ng-container *ngFor="let item of list; let i=index">
   <div class="now-box-small">
       <div class="room">
           <span>{{item.nowCall.room}}</span>
       </div>
       <div class="now-name">
           <span class="namesize" *ngif=item.nowCall.no===list2[i].nowCall.no>
              {{item.nowCall.no}}-{{item.nowCall.patient_name}}
           </span>
       </div>
    </div>
  </ng-container>

如果他们的相等判定很复杂,顺序也不确定,那么你需要在JavaScript代码里面自己组织好这个list,再来模板里面for

Answer 2

使用ngClass或是ngStyle都可以：

<ng-container *ngFor="let item of list">
   <div class="now-box-small">
       <div class="room">
           <span>{{item.nowCall.room}}</span>
       </div>
       <div class="now-name">
           <span  [ngClass]="{namesize: shouldChangeFontSize(item)}">
              {{item.nowCall.no}}-{{item.nowCall.patient_name}}
           </span>
       </div>
    </div>
  </ng-container>

   boolean shouldChangeFontSize(item: Item) {
      // 在这里实现自己的逻辑，如果要改变字体，返回true
      
      // 否则返回false
   }

当然了ngStyle也可以,具体的实用示例可参考：angular入门实例

Answer 3

//将 list2 的 {{item.nowCall.no}}-{{item.nowCall.patient_name}} 放到一个数组中。
//如
var list2Map=['no1-name1','no1-name1'];

//然后 根据 list1 的 {{item.nowCall.no}}-{{item.nowCall.patient_name}} 来匹配list2Map是否存在。
list2Map.includes('no1-name1')