Блог

Главная - Вопросы по программированию - Как сделать вложенный ngFor? [Угловой и Ионный]

Как сделать вложенный ngFor? [Угловой и Ионный]

#html #angular #ionic-framework

Вопрос:

У меня есть вложенный ngFor, который я хочу использовать для визуализации элементов каждой области. Как я могу достичь своей цели? Это работает, если я перемещаю свой второй ngFor в кнопку ионного сегмента, но затем все эти элементы отображаются внутри моей кнопки, а это не то, что я хочу.

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. чего именно вы хотите? Если вы хотите повторить area.items , вам нужно поместить его в другой *ngFor . Если вы хотите, чтобы он был отделен от кнопок, вы можете просто завернуть ion-row его внутрь <ng-container *ngFor="let are of template.Version.Areas">

2. @BunyaminCoskuner если вы опубликуете это как ответ, я могу отметить его как ответ. Это сработало!

Ответ №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>
Метки: