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}}。

有没有办法在棱角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>

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

我发现它也更清晰，因为模板不会直接调用“复杂逻辑”。

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

2 个答案: