Как динамически выделять текст в ngFor

Question

Как динамически выделять текст в ngFor

1

У меня есть ряд строк внутри 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.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 динамически?

user35202 12 июнь 2018, в 16:47

Источник

2

Если вы говорите о стилизации всего элемента, не обращали ли вы внимания на директиву ngClass ?
Patrick Evans 12 июнь 2018, в 13:50
1

попробуйте использовать угловые директивы angular.io/guide/attribute-directives
CruelEngine 12 июнь 2018, в 13:51
0

@PatrickEvans Я смотрел на это, но я не уверен, как передать {{block.key1}} в функцию компонента, которая определяет, используя сложную логику, выделять ли элемент.
user35202 12 июнь 2018, в 13:58
0

@CruelEngine Для каждой строки ngДля решения о том, выделять элемент или нет, нужна сложная логика для компонента, а не для шаблона.
user35202 12 июнь 2018, в 14:00

Показать ещё 2 комментария

Теги:

angular

javascript

angular2-template

2 ответа

3

Ответ от @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>

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

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

A. Chiesa 12 июнь 2018, в 11:15

0

Очень хороший момент. Спасибо.
user35202 12 июнь 2018, в 14:36

Ещё вопросы

Если вы говорите о стилизации всего элемента, не обращали ли вы внимания на директиву ngClass ?
попробуйте использовать угловые директивы angular.io/guide/attribute-directives
@PatrickEvans Я смотрел на это, но я не уверен, как передать {{block.key1}} в функцию компонента, которая определяет, используя сложную логику, выделять ли элемент.
@CruelEngine Для каждой строки ngДля решения о том, выделять элемент или нет, нужна сложная логика для компонента, а не для шаблона.

Ulrich Dohou · Accepted Answer · 2018-06-12T12-41-00.000Z

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

Проблема в том, что condition зависит от значения {{block.key1}}. Так что это должна быть некоторая функция {{block.key1}} (и {{block.key2}}) в компоненте. Т.е. условие = checkToHighlight ({{block.key1}}) и условие = checkToHighlight ({{block.key2}}). Как я могу это сделать?
Вы можете написать, что проверяете его по шаблону или просто имеете функцию в вашем компоненте, которая будет возвращать ответ на основе или параметр
@ user35202 - [class.highlight]="shouldHighlight(block.key1)" .
@ user35202 Я обновил ответ на предложение ConnorsFan. Надеюсь, это поможет