javascript - 如何在 ngFor 中动态突出显示文本

Question

我在 ngFor 中有一系列行。

<div *ngFor="let block of data;">
 <div class="class-row">
     <div class="left">A Label:</div>
     <div class="right">{{block.key1}}</div>
 </div>
<div class="class-row">
     <div class="left">Another Label:</div>
     <div class="right">{{block.key2}}</div>
 </div>
</div>

事实证明，对于某些行，我想根据某些逻辑突出显示 {{block.key1}} 或 {{block.key2}}。

有没有办法在 angular 4+ 中做到这一点？我想调用一个组件函数并将它传递给 {{block.key1}} 或 {{block.key2}}，比如

<div *ngFor="let block of data;">
 <div class="class-row">
     <div class="left">A Label:</div>
     <div [innerHTML]=highlight({{block.key1}}) class="right"></div>
 </div>
<div class="class-row">
     <div class="left">Another Label:</div>
     <div [innerHTML]=highlight({{block.key2}}" class="right"></div>
 </div>
</div>

但这可能是不可能的。有什么方法可以动态更改 div 中文本的属性吗？

Answer 1

这里是你如何做到的。我假设当您谈论突出显示时，您指的是 CSS。如果是这样，你最好使用 ngClass。这是您如何做到这一点的示例。

<div *ngFor="let block of data;">
  <div class="class-row">
   <div class="left">A Label:</div>
   <div [ngClass]="[shouldHighlight(block.key2) ? 'highlight' : '']" class="right">{{block.key1}}</div>
  </div>
  <div class="class-row">
   <div class="left">Another Label:</div>
   <div [ngClass]="[shouldHighlight(block.key2) ? 'highlight' : '']" class="right">{{block.key2}}</div>
  </div>
</div>

 <!--You can also do it by this way -->

   <div *ngFor="let block of data;">
  <div class="class-row">
   <div class="left">A Label:</div>
   <div [class.highlight]="shouldHighlight(block.key1)" class="right">{{block.key1}}</div>
  </div>
  <div class="class-row">
   <div class="left">Another Label:</div>
   <div [class.highlight]="shouldHighlight(block.key2)" class="right">{{block.key2}}</div>
  </div>
</div>

<style>
  .highlight{
   /* Your CSS Here*/
  }
</style>