Есть ли какой-нибудь возможный способ применения динамического CSS на * ngFor, основанный на следующей ситуации?

Question

Использование *ngFor. Мой код такой.

<div *ngFor="let data of datas">
  <td>{{data.name}}</td>
  <td>{{data.content}} </td>
</div>

Предположим, data.content равен " Привет, как дела ". Есть ли какой-либо возможный способ динамического применения CSS на Hello, чтобы показать только Hello зеленым цветом и другие черным цветом.

Answer 1

Вы можете использовать ломтик для букв, которые вы хотите в разных CSS:

<div *ngFor="let data of datas">
<td>{{data.name}}</td><br/>
 <td style="color:green">{{data.content | slice:0:6}}</td> 
<td>{{data.content | slice:7:24}} </td>
</div>

Рабочий пример

Answer 2

Вы можете иметь <span style="color:green"></span> и отображать текст до , внутри него, а остальную часть текста после span

Попробуйте так:

<td><span style="color:green">{{data.content.substr(0, data.content.indexOf(',')}}</span> {{data.content.substring(data.content.indexOf(',') + 1)}}</td>

Answer 3

вы можете попробовать вот так

<div *ngFor="let data of datas">
   <td>{{data.name}}</td>
   <td *ngIf="data.content.indexOf('Hello') >= 0; else elseSection;" [style.color]="red" > {{data.content}} </td>
  <ng-template #elseSection>
   <td [style.color]="black">{{data.content}} </td>
  </ng-template>
</div>