在HTML视图中的特定文本之前添加行号

Question

具有一个对象数组，并遍历每个对象以在HTML上显示它。如果重复特定的键，则需要添加换行符。

var arr = [{color: red},{fruit: grapes},{city: Bangalore} {ice-cream: chocolate},{color: yellow},{fruit: orange},{color: pink}]

尝试的代码

<div class="bx--row" *ngFor="let obj of arr; let i = index;">
            <ng-container *ngFor="let item of obj | keyvalue">  
             <span class="bx--col-xs-5 bx--col-md-5"> {{item.key}} :</span>
             <span class="bx--col-xs-5 bx--col-md-5">{{item.value}} </span>
             </ng-container>
           </div>

预期输出：

color: red
fruit:grapes
city: Bangalore
ice-cream: chocolate
//line breaker/space here before having key "color" repeating
color: yellow
fruit: orange

color: pink

Answer 1

我不确定您要做什么，但是您可以使用color指令检查属性是否为*ngIf。

<div class="bx--row" *ngFor="let obj of arr; let i = index;">
  <ng-container *ngFor="let item of obj | keyvalue">
    <ng-container *ngIf="item.key === 'color'">
      <br />
    </ng-container>
    <span class="bx--col-xs-5 bx--col-md-5"> {{item.key}} :</span>
    <span class="bx--col-xs-5 bx--col-md-5">{{item.value}} </span>
  </ng-container>
</div>