www.state-it.info

Gran base de respuestas a las preguntas de los desarrolladores
Header decor

Cómo registrar la lógica en *ngFor?

kachurinets 2018-11-02 12:25:14

tengo un objeto en el que cada propiedad es el objeto de la.

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

Puse una lista de nombres de los campos, por lo tanto

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

Cómo puedo hacer para que en esta lista no se metían con los valores a los cuales value === false?
p.s. Передалать objeto en un conjunto de objetos en mi caso no. Crear un array también no se puede, que sólo desea utilizar el objeto tableColumnsConfig

pushthebutton 2018-11-02 14:44:03

en que el problema de usar *ngIf ?

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


Total answers: 1

mazhekin 2018-11-02 13:14:59

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

y escribe dos generales, paipa, puede luego después, en algún lugar de módulo común tipo de 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]);
  }
}

Preguntas relacionadas:

Footer decor

© www.state-it.info | Base of answers to questions for developers and programmers.