Как правильно прописать логику в *ngFor?

Question

[kachurinets]

У меня есть объект, в котором каждое свойство есть объектом.

objectKeys = Object.keys;
tableColumnsConfig: any = {
        id: {
            name: 'ID',
            value: true
        },
        title: {
            name: 'Застройщик',
            value: true
        },
        phone: {
            name: 'Телефон',
            value: true
        },
        website: {
            name: 'URL',
            value: false
        },
        avitoId: {
            name: 'Avito ID',
            value: true
        }
}

Я вывожу список названий полей таким образом

<div *ngFor="let key of objectKeys(tableColumnsConfig)">
{{tableColumnsConfig[key].name}}
</div>

Как мне сделать, чтобы в этот список не попадали те значения у которых value === false?
p.s. Передалать объект в массив объектов в моем случае нельзя. Создавать дополнительный массив тоже нельзя, нужно использовать только объект tableColumnsConfig

Comments

[Евгений]

в чем проблема использовать *ngIf ?

<div *ngFor="let key of objectKeys(tableColumnsConfig)">
 <div *ngIf="tableColumnsConfig[key] && tableColumnsConfig[key].value">
  {{tableColumnsConfig[key].name}}
 </div>
</div>

Answer 1

[Василий Мажекин]

<div *ngFor="let column of tableColumnsConfig | toIterable | trueOnlyBy : 'value'">
   {{column.name}}
</div>

и напишите два общих пайпа, может потом еще пригодятся, куда-нибудь в общий модуль типа shared.module.ts
1) to-iterable.pipe.ts

@Pipe({
  name: 'toIterable'
})
export class ToIterablePipe implements PipeTransform {
  transform(dict: Object) {
    return Object.keys(dict || {}).map(key => dict[key]);
  }
}

2) true-only-by.pipe.ts

@Pipe({
  name: 'trueOnlyBy'
})
export class TrueOnlyByPipe implements PipeTransform {
  transform(arr: any[], propName: string): object {
    return arr.filter(item => !!item[propName]);
  }
}