如何制作嵌套的 ngFor？ [角度和離子]

Question

我有一個嵌套的 ngFor，我想用它來渲染每個區域的項目。 我怎樣才能實現我的目標？ 如果我將第二個 ngFor 向上移動到 ion-segment-button 中，它會起作用，但是所有這些項目都會在我的按鈕內呈現，這不是我想要的。

HTML

<app-toolbar *ngIf="template" [title]="template.Template_code"></app-toolbar>
<ion-content *ngIf="template" fullsreen>
  <ion-grid fixed>
    <!-- AREAS -->
    <ion-row>
      <ion-col size="12">
      <!-- This ngFor works -->
        <ion-segment
          scrollable
          (ionChange)="onAreaChange($event)"
          value="{{ template.Version.Areas[0].Descriptions[0].Description }}"
        >
          <ion-segment-button
            *ngFor="let area of template.Version.Areas"
            value="{{ area.Descriptions[0].Description }}"
          >
            <ion-label>
              {{ area.Descriptions[0].Description }}
            </ion-label>
          </ion-segment-button>
        </ion-segment>
      </ion-col>
    </ion-row>

    <!-- How do I make area work here? -->
    <ion-row *ngFor="let item of area.Items">
      <ion-col size="12">
        <div>
          {{ item }}
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Answer 1

試試這個：

<ng-container *ngFor="let verArea of template.Version.Areas">
   <ion-row>
  <ion-col size="12">
  <!-- This ngFor works -->
    <ion-segment
      scrollable
      (ionChange)="onAreaChange($event)"
      value="{{ template.Version.Areas[0].Descriptions[0].Description }}"
    >
      <ion-segment-button
        *ngFor="let area of template.Version.Areas"
        value="{{ area.Descriptions[0].Description }}"
      >
        <ion-label>
          {{ area.Descriptions[0].Description }}
        </ion-label>
      </ion-segment-button>
    </ion-segment>
  </ion-col>
</ion-row> 
</ng-container>