@kachurinets

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

У меня есть объект, в котором каждое свойство есть объектом.
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
  • Вопрос задан
  • 157 просмотров
Решения вопроса 1
mazhekin
@mazhekin
Frontend, Backend Web Developer
<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]);
  }
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы