Angular 如何使用*ngIf根据*ngFor循环显示一行文本？

我必须使用Ionic编写一个简单的任务管理器应用程序。对于“已完成的任务”部分，需要有一个文本行“已完成的任务”，该行仅显示任何任务是否标记为已完成。我们被告知使用*ngIf指令编写，但我无法理解

我曾尝试使用ngFor中的项来获取任务的布尔值，但我知道这是错误的，因为每次我将一行标记为已完成时，它都会打印该行。这是我为completed task部分编写的代码，它使用管道从列表中过滤已完成的任务。只有当有一个任务的Completed值为true时，“Completed tasks”行才必须打印

是否有方法检查数组中的任何值是否为真，以便在所有任务都不完整时打印并隐藏该行？ 提前谢谢你

<h1>Completed tasks</h1>
<ion-list no-lines>
   <ion-item *ngFor="let item of tareaServicio.lista|pipeFinalizado2">
       <ion-label color="medium" [ngStyle]="estiloLinea(item)">{{item.descripcion}}</ion-label>
       <ion-checkbox color="medium" checked="true" (ionChange)="finalizarItem(item)"></ion-checkbox>
   </ion-item>
</ion-list>

已完成的任务
{{item.description}}

您可以筛选列表。你不需要ngIf

在.ts文件中：

const filteredList = tareaServicio.lista.filter(item => item.id !== -1); // condition here

然后

<ion-list no-lines>
   <ion-item *ngFor="let item of filteredList">
       <ion-label color="medium"><del>{{item.descripcion}}</del></ion-label>
       <ion-checkbox color="medium" checked="true" (ionChange)="finalizarItem(item)"></ion-checkbox>
   </ion-item>
</ion-list>

{{item.description}}

您可以筛选列表。你不需要ngIf

在.ts文件中：

const filteredList = tareaServicio.lista.filter(item => item.id !== -1); // condition here

然后

<ion-list no-lines>
   <ion-item *ngFor="let item of filteredList">
       <ion-label color="medium"><del>{{item.descripcion}}</del></ion-label>
       <ion-checkbox color="medium" checked="true" (ionChange)="finalizarItem(item)"></ion-checkbox>
   </ion-item>
</ion-list>

{{item.description}}

我认为这取决于您在决定任务是否完成时的逻辑有多复杂

如果条件很简单，可以执行以下操作：

{{item.description}}
（ionChange）=“最终确定项目”

但是，如果您的逻辑稍微复杂一点，您可以创建一个映射来跟踪每个项目的状态

completedTasksMap: { [k: string]: boolean } = {};

ngOnInit() {
 this.apiService.get(...)
  .subscribe(this.handleReceivedTasks.bind(this))
}

handleReceivedTasks (tasks) {
 this.taskList = tasks;

 tasks.forEach(t => (this.completedTasksMap[t.id] = this.isTaskCompleted(t) ))
}

private isTaskCompleted (t): boolean { /* ... */ }

您的模板如下所示：

{{item.description}}

我认为这取决于您在决定任务是否完成时的逻辑有多复杂

如果条件很简单，可以执行以下操作：

{{item.description}}
（ionChange）=“最终确定项目”

但是，如果您的逻辑稍微复杂一点，您可以创建一个映射来跟踪每个项目的状态

completedTasksMap: { [k: string]: boolean } = {};

ngOnInit() {
 this.apiService.get(...)
  .subscribe(this.handleReceivedTasks.bind(this))
}

handleReceivedTasks (tasks) {
 this.taskList = tasks;

 tasks.forEach(t => (this.completedTasksMap[t.id] = this.isTaskCompleted(t) ))
}

private isTaskCompleted (t): boolean { /* ... */ }

您的模板如下所示：

{{item.description}}