Как вывести в таблице angular material элемент таблицы с определенными условиями?

Question

[Адель Халитов]

Есть массив объектов:

[
{name: 'some1', tasks: [{taskname: 'tasksome1', status: 'finished' }, {taskname: 'tasksome2', status: 'finished' }] },
{name: 'some2', tasks: [{taskname: 'tasksome3', status: 'started' }, {taskname: 'tasksome4', status: 'finished' }] },
]

Так вот мне нужно в ячейке:

<ng-container matColumnDef="tasks">
    <th mat-header-cell *matHeaderCellDef> Задачи </th>
    <td mat-cell *matCellDef="let element"> {{element.taskname}} </td>
  </ng-container>

Выводить только ту задачу, которые имеют статус "started", как это реализовать?

Comments

[Urukhayy]

Как вариант:
Делать ещё одно свойство в объекте (либо в новом объекте) "фильтрованные задачи", и на уровне .ts фильтровать туда нужные задачи. А в компоненте выводить всё из фильтрованного массива

Также можно сделать классу getter, который будет возвращать массив фильтрованных задач.

[Ivan Stroykin]

Подготовите свою реализацию на stackblitz.com ?

Answer 1

[Вячеслав]

Вам нужно использовать директиву ngIf примерно так:

<ng-container matColumnDef="tasks">
    <th mat-header-cell *matHeaderCellDef> Задачи </th>
    <td 
mat-cell *matCellDef="let element"
*ngIf="element.status === started"
> {{element.taskname}} </td>
  </ng-container>

Извините, если там будут ошибки в синтаксисе, я начинающий