如何在 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>

Answer 2

@Ulrich 的回答是正确的，但我想扩展一个很容易错过的替代方案。

也就是说：你假设你必须调用 ngFor 中的一个函数。好吧，如果您选择不对数据进行预处理，这就是事实。

我会尝试做的是在加载数据时预处理数据：

this.data.forEach(block => {
  block.highlightKey1 = this.shouldHighlight(block.key1);
  block.highlightKey2 = this.shouldHighlight(block.key2);
}

如果您可以扩展模型以包含这些额外的字段，一切都会更顺利：

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

在运行时，此解决方案的性能会稍好一些，因为在更改检测期间不会进行任何函数调用，而只会在加载时进行。

我也觉得它更简洁，因为模板不会直接调用 "complex logic"。

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

How to dynamically highlight text in ngFor

javascript

angular2-template

angular