使用 ngFor 遍历字符串中的每个字符？

Question

I have a string which I want to add certain styles to depending on the character. To do that, I need to loop through each character in the string.

The data I'm getting from a third party api is returning a data set with data which starts with the keyed in term. So if a user types "far" into an input field, the api might return something like this:

[
 { name: 'far' },
 { name: 'farsighted' },
 { name: 'farted'},
 { name: 'farmhouse'}
]

in this case the first object is an exact match to what the user typed in.

Now, on the UI, I show the list of results from this API call.

HTML may be like:

<ng-container *ngFor="let result of resultsFromAPI>
 <span>{{result.name}}</span>
</ng-container>

But - what I want to do is loop through each character in the result.name span and bold the characters which are an exact match to the user inputted term. I've tried a splitstring pipe, but that doesn't seem to be doing the trick, or maybe my html was wrong.

<div>
   <span *ngFor="let char of term.ticker | split term.ticker" class="symbol">
     <span *ngFor="let num of char | split char">{{char}}</span>
   </span>
</div>

My split pipe:

export class SplitStringPipe implements PipeTransform {
  
     transform(value: any, args?: any): any {
       console.log(value.split(''))
       return value.split('');
     }
}

Answer 1

I think the issue here is in the split pipe.

"hello world".split() returns ["hello world"]

"hello world".split('') returns ["h","e","l","l","o"," ","w","o","r","l","d"]

Make sure that you are splitting based on the empty string.

Update: It looks like your pipe is correct.

I'm not sure what comparisons you are trying to do with term.ticker but hopefully something like this would work:

<ng-container *ngFor="let result of resultsFromAPI">
 <ng-container *ngFor="let char of result.name | split">
  <span [ngStyle]="{[insert conditional styles here]}">{{char}}</span>
 </ng-container>
</ng-container>