Try this way
@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
transform(value, args:string[]) : any {
let keys = [];
for (let key in value) {
keys.push({key: key, value: value[key]});
}
return keys;
}
}
<td *ngFor="let dateObj of monthlyCalendar.dateObjList | keys | async" class="phCell">
<span *ngIf="monthlyCalendar.dateObjList[dateObj].isPublicHoliday">PH</span>
</td>
You could create a custom pipe to return the list of key for each element.
Something like that:
<!-- language: lang-ts -->
import { PipeTransform, Pipe } from '@angular/core';
@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
transform(value, args:string[]) : any {
let keys = [];
for (let key in value) {
keys.push(key);
}
return keys;
}
}
and use it like that:
<!-- language: lang-html -->
<tr *ngFor="let c of content">
<td *ngFor="let key of c | keys">{{key}}: {{c[key]}}</td>
</tr>
__Edit__
You could also return an entry containing both key and value:
<!-- language: lang-ts -->
@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
transform(value, args:string[]) : any {
let keys = [];
for (let key in value) {
keys.push({key: key, value: value[key]});
}
return keys;
}
}
and use it like that:
<!-- language: lang-html -->
<span *ngFor="let entry of content | keys">
Key: {{entry.key}}, value: {{entry.value}}
</span>
