Saya memiliki ngFor bersarang yang ingin saya gunakan untuk merender item setiap area. Bagaimana saya bisa mencapai tujuan saya? Ini berfungsi jika saya memindahkan ngFor kedua saya ke ion-segment-button tetapi kemudian semua item itu dirender di dalam tombol saya, yang bukan yang saya inginkan.

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>
-1
Furkan Öztürk 13 Mei 2021, 15:15

1 menjawab

Jawaban Terbaik

Coba saja ini:

<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>
1
Running Rabbit 13 Mei 2021, 12:44