时间戳

首页 > 解决方案 > 如何制作嵌套的 ngFor？[角度和离子]

html - 如何制作嵌套的 ngFor？[角度和离子]

问题描述

我有一个嵌套的 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>

标签： htmlangularionic-framework

解决方案

试试这个：

<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>

推荐阅读