根据Angular中的文本突出显示文本

时间:2019-03-22 13:01:18

标签: angular typescript highlight angular7

customers.json文件 json file

customer.service.ts

service.ts

userdetails.component.ts

userdeatils.component.ts 1 userdetails.component.ts 2

userdetails.component.html html file

所以,我只想将goodword和badwords数组与句子数据的json文件进行比较,然后在句子中找到goodwords和badwords并根据是否为好字突出显示该单词,然后以绿色背景突出显示,并以红色突出显示不良单词背景。

1 个答案:

答案 0 :(得分:1)

我不是在这个问题上有太多负面反馈,而是在这里给您答案。

堆叠闪电战 Demo 此处

  

组件

请记住在goodWordsbadWords数组中将所有单词都小写

 obj = {
    customer: [
      {
        threshold: 80,
        sentence: 'Agent : Thank you for calling ABC company. My name is Ashley. How may I help you today?'
      },
      {
        threshold: 40,
        sentence: 'Customer : I am calling because I recieved a wrong bill. I just paid my phone bill two days ago.'
      },
    ]
  };
  goodWords = ['thank', 'you', 'help', 'sorry', 'please'];
  badWords = ['wrong', 'our', 'last', 'my'];
  

HTML

<div *ngFor="let item of obj.customer">
    <span *ngFor="let word of item.sentence.split(' ')">

    <span *ngIf="goodWords && goodWords.indexOf(word.trim().toLowerCase()) > -1; else redWord">
      &nbsp;<span style="color: green">{{word}}</span>
    </span>

    <ng-template #redWord>      
      <span *ngIf="badWords && badWords.indexOf(word.trim().toLowerCase()) > -1; else other" style="color: red">
        {{word}}
      </span>
    </ng-template>

    <ng-template #other>
      {{word}}
    </ng-template>
  </span>
   <br><br>
</div>

因此,我已经处理了HTML本身中的所有问题。希望这对您有用。