对同一个数组使用多个 ngFor

Question

Angular/Ionic 菜鸟在这里。我在网上到处查看（尤其是这个网站，因为它非常有用），但找不到有同样问题的人。我想要做的是在我的 ts 组件中有一个单一的任务数组，然后在我的 html 模板中有四个不同的地方，我根据任务的类型显示这些任务（使用 ngif 来确定哪个块他们最终应该在）。

我的 ts 组件中有一个 wizardTasks 任务数组，每个任务都是一个具有名称、类型、频率和 "additional" 属性的对象，其中包含关于任务。

因此，根据该数组，我要显示的代码如下所示：

<ion-item-group>
  <ion-item *ngFor="let task of wizardTasks">
    <ion-label *ngIf="task.frequency==='oneTimeOnly' && task.type==='biological/physical'">{{task.name}}</ion-label>
    <ion-label *ngIf="task.frequency==='everyDay' && task.type==='biological/physical'">{{task.name}} every day</ion-label>
    <ion-label *ngIf="task.frequency==='daysOfWeek' && task.type==='biological/physical'">{{task.name}} every {{task.additional}}</ion-label>
    <ion-label *ngIf="task.frequency==='specificDate' && task.type==='biological/physical'">{{task.name}} on {{task.additional}}</ion-label>
  </ion-item>
</ion-item-group>

除了这些块中有四个，其中 ngIf task.type 是四个组之一。

我遇到的问题是，当我这样做时，它会为所有四个位置的每个条目添加一个 space。因此，如果我有四个任务，每种任务一个，它会在适当的块中显示每个任务，但每个块中都会有 spaces，用于其他任务在该块中时的位置。

我希望这是有道理的。如果我需要添加任何其他内容，请告诉我，感谢您的帮助！

如果有帮助请截图...

Answer 1

根据对原始问题的评论，您似乎正在为每个类别呈现所有 <ion-item> (wizardTask) 元素，无论它们是否属于该类别。您可以通过在使用 *ngFor 指令时过滤 wizardTasks 列表来解决此问题：

/* Component */
getWizardTasks(type: string): WizardTask[] {
    return this.wizardTasks.filter(task => task.type === type);
}

/* Template */
<ion-item-group>
    <ion-item *ngFor="let task of getWizardTasks('biological/physical')">
        <ion-label *ngIf="task.frequency==='oneTimeOnly'">{{task.name}}</ion-label>
        <ion-label *ngIf="task.frequency==='everyDay'">{{task.name}} every day</ion-label>
        <ion-label *ngIf="task.frequency==='daysOfWeek'">{{task.name}} every {{task.additional}}</ion-label>
        <ion-label *ngIf="task.frequency==='specificDate'">{{task.name}} on {{task.additional}}</ion-label>
    </ion-item>
</ion-item-group>

对同一个数组使用多个 ngFor

Use multiple ngFor for same array

angular-ng-if

ionic-framework

ngfor

angular