Question

如何使用*ngFor迭代字符串？我有一个带有二进制代码的字符串（例如0010），并且只有一点依赖，我必须显示其他图标。

 <div class="row" *ngFor="let item of subscribedCommandBus2Easy; let i = index">
   <span class="numberCircleBus2Easy col-md-2">
       {{item}}
   </span>
  <i *ngFor="let num of commandsDecimal">
    <i ng-repeat="let el in num">
     <span [ngClass]="el =='0' ? 'off-icon' : 'on-icon'">
        //is this the way I access the single character?
     </span> 
    </i>
  </i>
</div>

我尝试了这段代码，但是它不起作用。

commandsDecimal 是我的二进制字符串数组。我想在索引i上循环 commandsDecimal （假设元素为1010），如果位置y的字符为0，我必须显示一个图标，否则显示另一个图标，依此类推...

有什么建议吗？

Answer 1

最好的方法是对字符串进行分割。使用自定义管道：

@Pipe({
  name: 'split'
})
export class SplitPipe implements PipeTransform {

   transform(value: any, args?: any): any {
     return value.split('');
   }
}

然后遍历它。像这样：

<div *ngFor="let item of myString">
  <div *ngFor="let num of item | split item">
     // access num
  </div>
</div>

示例：https://stackblitz.com/edit/angular-8bkywr

Answer 2

在组件打字稿中

function getSplit(string) {
    return string.split('').map(number)
}

在模板中

*ngFor="let num of getSplit(commandsDecimal)"

Answer 3

您可以执行此操作，而无需在组件中添加任何代码。 ng-repeat也是AngularJS语法，而不是Angular 2+。在Angular 2+中，ngFor用于在HTML中进行迭代。

<ng-container *ngFor="let num of commandsDecimal">
    <i *ngFor="let el of num.split('')" [ngClass]="el === '0' ? 'off-icon' : 'on-icon'"></i>
</ng-container>

如何遍历字符串中的单个字符

3 个答案: