时间戳

首页 > 解决方案 > 使用 ngFor 遍历字符串中的每个字符？

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

问题描述

我有一个字符串，我想根据字符添加某些样式。为此，我需要遍历字符串中的每个字符。

我从第三方 api 获得的数据正在返回一个数据集，其中的数据以键入的术语开头。因此，如果用户在输入字段中键入“远”，则 api 可能会返回如下内容：

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

在这种情况下，第一个对象与用户输入的内容完全匹配。

现在，在 UI 上，我显示了此 API 调用的结果列表。

HTML 可能类似于：

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

但是 - 我想要做的是遍历 result.name 范围中的每个字符，并将与用户输入的术语完全匹配的字符加粗。我尝试了一个 splitstring 管道，但这似乎没有奏效，或者我的 html 可能是错误的。

<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>

我的分流管：

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

标签： javascriptangular

解决方案

我认为这里的问题在于分流管道。

"hello world".split()返回["hello world"]

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

确保基于空字符串进行拆分。

更新： 看起来你的管道是正确的。

我不确定您要进行哪些比较，term.ticker但希望这样的事情会起作用：

<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>

推荐阅读