Как использовать * ngIf для отображения одной строки текста на основе цикла * ngFor?

Question

Я должен написать простое приложение диспетчера задач с использованием Ionic. Для раздела выполненных задач должна быть текстовая строка «Выполненные задачи», которая показывает, только если какие-либо задачи помечены как выполненные. Нам сказали написать это с помощью директивы * ngIf, но я не могу понять это.

Я пытался использовать элемент в ngFor, чтобы получить логическое значение задачи, но я знаю, что это неправильно, потому что этопечатает строку каждый раз, когда я отмечаю одну как завершенную. Это код, который у меня есть для раздела завершенных задач, он использует трубу для фильтрации завершенных из списка. Строка «Завершенные задачи» должна печататься, только если есть задача с завершенным значением в true.

Есть ли способ проверить, является ли какое-либо из значений в массиве истинным, чтобы она печатала строку искрывает ли это, если все задачи не выполнены? Заранее спасибо!

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

Answer 1

Я думаю, это зависит от того, насколько сложна ваша логика при принятии решения о том, завершена задача или нет.

Если условие простое, вы можете сделать это:

<ion-item *ngFor="let item of tareaServicio.lista">
       <ion-label color="medium" [ngStyle]="estiloLinea(item)">{{item.descripcion}}</ion-label>
       <ion-checkbox 
         color="medium" 
         [checked]="item.isCompleted" <!-- You can apply the same logic to other properties as well -->
        (ionChange)="finalizarItem(item)"
       ></ion-checkbox>

</ion-item>

Однако, если ваша логика немного сложнее, вы можете создать карту, которая будет отслеживать статус каждого элемента.

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 { /* ... */ }

И ваш шаблон будет выглядеть так:

<ion-item *ngFor="let item of taskList">
       <ion-label color="medium" [ngStyle]="estiloLinea(item)">{{item.descripcion}}</ion-label>
       <ion-checkbox 
         color="medium" 
         [checked]="completedTasksMap[item.id]"
        (ionChange)="finalizarItem(item)"
       ></ion-checkbox>

</ion-item>

Answer 2

Вы можете отфильтровать список. Вам не нужен 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>