如何将 object 与 Angular 中的键和值绑定？

Question

In Typescript I receive data from ASP.NET Core C# Dictionary (It is not a Map but it has keys and values ie I can run Object.keys(data) and Object.values(data) ).

In HTML I have an Angular component which binds to data . I cant figure out the syntax for binding the key and values array.

Roughly:

      <dx-gallery [dataSource]="data">
        <div *dxTemplate="let i of 'item'">
          <dx-chart [dataSource]="i.value">
            <dxi-series [name]="i.key" valueField="value.X"

i is a single key value pair (a string and an array) from whole data collection. in C# I would write i.Key and i.Value but it doesnt work in Typescript for me (the component doesnt see data to display).

I need to bind key and X

the data is {A: Array, B: Array} where Array is MyObj[]

Answer 1

you can loop over an object, by grabbing it's keys.

eg

// component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  data = {
    prop1: 'a',
    prop2: 'b'
  };
  keys = Object.keys(this.data);
}

--

//component.html
<p *ngFor="let k of keys">
  {{k}} : {{data[k]}}
</p>

Alternatively, you can expose the Object class to the html template and grab the keys and values as needed.

eg

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  data = {
    prop1: 'a',
    prop2: 'b'
  };
  keys = Object.keys(this.data);
  Object = Object;
}

--

// html
<p *ngFor="let k of Object.keys(data)">
  {{k}} : {{data[k]}}
</p>

However, adding function calls to your html can sometimes be less performant than just storing the the var "keys" in the ts file, as the function will reevaluate with every change detection cycle.

Answer 2

You could try the native KeyValuePipe from Angular: here

It would look like this, and allow you to refer to the entries with key and value :

<dx-gallery [dataSource]="data">
  <div *dxTemplate="let i of item | keyvalue">
     <dx-chart [dataSource]="i.value">
       <dxi-series [name]="i.key" valueField="value.X">