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

我在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>

但这可能是不可能的。

---

是否有某种方法可以动态更改div中文本的属性？

以下是您的方法。我想当你谈论hightlight时，你指的是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>

标签：
{{block.key1}}
另一个标签：
{{block.key2}}
标签：
{{block.key1}}
另一个标签：
{{block.key2}}
.亮点{
/*你的CSS在这里*/
}

以下是您的操作方法。我想当你谈论hightlight时，你指的是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>

标签：
{{block.key1}}
另一个标签：
{{block.key2}}
标签：
{{block.key1}}
另一个标签：
{{block.key2}}
.亮点{
/*你的CSS在这里*/
}

由@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>

标签：
{{block.key1}}
另一个标签：
{{block.key2}}

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

---

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

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>

标签：
{{block.key1}}
另一个标签：
{{block.key2}}

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

---

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

如果您正在谈论整个元素的样式，您没有看过指令吗？尝试使用angular directions@PatrickEvans我看过，但我不确定如何传递{{block.key1}对于使用复杂逻辑确定是否高亮显示元素的组件函数，对于NGF的每一行，要确定是否高亮显示元素，需要在组件上而不是模板上执行一些复杂的逻辑。如果要设置整个元素的样式，你没有看过指令吗？试着使用angular指令@PatrickEvans我看过了，但我不知道如何传递{{block.key1}对于使用复杂逻辑确定是否高亮显示元素的组件函数，对于NGF的每一行，要决定是否高亮显示元素，需要在组件而不是模板上执行一些复杂逻辑。建议：

[class.highlight]=“条件”

.Tks you@connorsfan问题在于

条件取决于{{block.key1}的值。所以它需要是组件中{{block.key1}（和{block.key2}）的函数。即，条件=checkToHighlight（{{block.key1}}}）和条件=checkToHighlight（{{block.key2}}）。我该怎么做呢？你可以把它写在模板中，或者在你的组件中有一个函数，它将返回一个基于响应的或parameter@user35202-
[class.highlight]=“shoulldhighlight（block.key1）”
。建议：
[class.highlight]=“条件”
.Tks you@connorsfan问题在于
条件取决于{{block.key1}的值。所以它需要是组件中{{block.key1}（和{block.key2}）的函数。即，条件=checkToHighlight（{{block.key1}}}）和条件=checkToHighlight（{{block.key2}}）。我该怎么做呢？你可以把它写在模板中，或者在你的组件中有一个函数，它将返回一个基于响应的或parameter@user35202-
[class.highlight]=“shoulldhighlight（block.key1）”
。