在特定文本前的 HTML 视图中添加一行 space

Question

拥有一个对象数组并遍历每个对象以在 HTML.Need 上显示它以在重复特定键时添加换行符。

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

我不太确定你在找什么，但你可以使用 *ngIf 指令检查属性是否是 color。

<div class="bx--row" *ngFor="let obj of arr; let i = index; let first = first">
  <ng-container *ngFor="let item of obj | keyvalue">
    <ng-container *ngIf="item.key === 'color' && !first">
      <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>

工作示例：Stackblitz

更新

<div class="bx--row" *ngFor="let obj of arr; let i = index; let first = first">
  <ng-container *ngIf="obj.color && !first">
    <br />
  </ng-container>
  <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>

在特定文本前的 HTML 视图中添加一行 space

Add a line space in an HTML view before a specific text

html

javascript

key-value

angular

更新