Как динамически выделять текст в 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}} на основе некоторой логики.

Есть ли способ сделать это в угловом 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

Ответ @Ulrich правильный, но я бы хотел остановиться на альтернативе, которую легко упустить.

То есть: вы предполагаете, что должен вызвать функцию внутрингфор.Что ж, это правда, если вы решите не обрабатывать данные.

Я бы попытался предварительно обработать данные при загрузке:

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>

Во время выполнения это решение будет работать немного лучше, поскольку при обнаружении изменений вызов функции не будет выполняться, а только при нагрузке.

Я тоже нахожу это чище, потому что "сложная логика" не будет вызываться напрямую шаблоном.

Answer 2

Вот как вы можете это сделать.Я полагаю, когда вы говорите об 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>