ionic/angular 中的 ngFor 索引缺少换行符

Question

我有以下 Ionic 4/angular 7 html 代码。数据源是一个 3 维 javascript 对象。值显示正常，但我无法让所有项目（v1、v2 和 v3）始终显示在新行上。我不是这方面的专家，所以也许我遗漏了一些明显的东西。这怎么能以最简单的方式完成？

<ion-content>
  <ion-list>
    <ion-item *ngFor="let v1 of this.values1">
      {{v1.name1}}
        <ion-item *ngFor="let v2 of v1.values2">
          {{v2.name2}}
            <ion-item *ngFor="let v3 of v2.values3">
              {{v3.name3}}
            </ion-item>
        </ion-item>
    </ion-item>
  </ion-list>
</ion-content>

Answer 1

我猜你想要这个结果：

<ion-list>
    <ng-container *ngFor="let v1 of values1">
      <ion-item>
        {{ v1.name1 }}
      </ion-item>
      <ng-container *ngFor="let v2 of v1.values2">
        <ion-item>
          {{ v2.name2 }}
        </ion-item>
        <ion-item *ngFor="let v3 of v2.values3">
          {{ v3.name3 }}
        </ion-item>
      </ng-container>
    </ng-container>
</ion-list>

rtpHarry 更新

不确定对此做出贡献的最佳礼仪，但我认为@Marco Chavez 的意思是：

<ion-list>
<ng-container *ngFor="let v1 of values1">
  <ion-item>
    {{ v1.name1 }}
  </ion-item>
  <ng-container *ngFor="let v2 of v1.values2">
    <ion-item>
      {{ v2.name2 }}
    </ion-item>
    <ng-container *ngFor="let v3 of v2.values3">
      <ion-item>
        {{ v3.name3 }}
      </ion-item>
    </ng-container>
  </ng-container>
</ng-container>
</ion-list>

ionic/angular 中的 ngFor 索引缺少换行符

ngFor indexing in ionic/angular is missing newlines

html

ionic4

angular7

rtpHarry 更新