Angular iterate Object with name and values-CodePudding

I need your help please.

I have a interface with 30 properties. I call a Rest API, written in C#, and get a DataTable back with the results. Now i can convert this result to my interface.

My interface got a name and a value like:

PropertyName1:boolean;
PropertyName2:boolean;
PropertyName3:boolean;
PropertyName4:boolean;

But, i don't wanna write all 30 properties with {{ object.Properyname }} in my *ngFor. Is there a way, that i can iterate this object like keyvaluepair?

I tried a keyvalue pipe, but this doesn't work -.-

This is my pipe.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'keyValuePipe',
})
export class KeyValuePipePipe implements PipeTransform {
  transform(value: any, ...args: string[]): any {
    let keys = [];
    for (let key in value) {
      keys.push({ key: key, value: value[key] });
    }
    console.log(keys);
    return keys;
  }
}

Thanks a lot.

i tried a keyvalue pipe. i expect that i can iterate a object a là keyvaluepair so that i don't have to write every propery for it self.

CodePudding user response：

You don't need to create a custom pipe you can use inbuilt key value pipe something like

<div *ngFor="let item of yourObject | keyvalue">
    Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>

Working Demo