Блог

В машинописном виде я получаю data от ASP.NET Основной C# Dictionary (Это не a Map , но у него есть ключи и значения, т. Е. я могу запускать Object.keys(data) и Object.values(data) ).

В HTML у меня есть угловой компонент, который привязывается к data . Я не могу понять синтаксис привязки массива ключей и значений.

Грубо:

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

i представляет собой единственную пару ключ-значение (строка и массив) из всей коллекции данных. в C# я бы написал i.Key и i.Value , но для меня это не работает в машинописном формате (компонент не видит отображаемые данные).

Мне нужно связать key и X

данные {A: Массив, B: Массив} , где массив-myObj[]

Вы могли бы попробовать родной KeyValuePipe из углового: здесь

Это выглядело бы так и позволяло бы вам ссылаться на записи с key и 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">
 

вы можете зацикливаться на объекте, захватывая его ключи.

напр.

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

Кроме того, вы можете предоставить Object классу доступ к html-шаблону и при необходимости захватить ключи и значения.

напр.

 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>
 

Однако добавление вызовов функций в ваш html иногда может быть менее эффективным, чем простое сохранение «ключей» var в ts файле, так как функция будет пересматриваться с каждым циклом обнаружения изменений.