对同一阵列使用多个ngFor

Question

此处是角/离子型菜鸟。我在网上到处都看过（特别是这个站点，因为它是如此有用），却找不到与此问题相同的人。我想做的是在ts组件中有一个任务数组，然后在html模板中有四个不同的位置，这些位置根据任务类型显示这些任务（使用ngif确定应该结束的块在）。

我在ts组件中有一个taskTasks数组，每个任务都是一个对象，该对象具有名称，类型，频率和“附加”属性，其中包含有关该任务的任何额外信息。

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

<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是四个组之一。

我遇到的问题是，当我这样做时，它正在为所有四个位置的每个条目添加一个空格。因此，如果我有四个任务（每种类型之一），它将在适当的块中显示每个任务，但是如果每个任务都在该块中，它将在每个块中都有空格。

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

如果有帮助，请截屏...

Answer 1

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

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