Angular - изменить объекты на массив и заставить его слушать при изменении

Question

Эта проблема очень простая, я знаю, но мне нужна помощь в следующей ситуации.Сначала я хочу использовать значение баланса интерфейса Fix в одном массиве, чтобы добавить его к данным chart.js и значение имени к метке.

Я построил интерфейс и компонент.

Вы видите (и я вижу, как вы разбиваете голову о стену), что я сделал цикл for в две строки (labels: .... и data: ....), которые показывают, что я ожидаю.

export interface Fix {
  name?: String,
  balance?: number
}

import { Component, OnInit } from '@angular/core';
import { Chart } from 'chart.js';
import { Fix } from '../fix';

@Component({
  selector: 'app-container',
  templateUrl: './container.component.html',
  styleUrls: ['./container.component.scss']
})
export class ContainerComponent implements OnInit {

  public chart: Chart;
  public fix: Fix[];

  constructor() {

    this.fix = [
      {'name': 'Fix1', 'balance': 123},
      {'name': 'Fix2', 'balance': 23}
    ]

  }

  ngOnInit() {
    this.chart = new Chart('chart', {
        type: 'doughnut',
        data: {
            labels: [for (let bal of this.fix) {bal.name}],
            datasets: [{
                label: '# of Votes',
                data: [for (let bal of this.fix) {bal.balance}]
            }]
        }
    });
  }

}

Я знаю, что могу запустить цикл, подобный

for (let x if this.fix) {
    labelsArray.push(x.name);
    fixArray.push(x.balance);
}

, и использовать его для моего chart.js, но это подводит меня к следующему пункту.Позже вместо определения исправления в конструкторе, объект будет выведен из дочернего компонента.Каждый раз, когда значения меняются, график должен обновляться.

Answer 1

Не уверен, что я буду следовать за вами на 100%, но вот что я вижу, что вы просите:

// return only the id values in your objects
console.log(this.fix.map(x=>x.id));

Для принудительного обновления в дочернем компоненте я делаю это:

ParentComponent View

<child-component [fix]="childFixArray"></child-component>

ChildComponent Controller

// This property is bound using its original name.
@Input('childFixArray') fix: [];

// sometimes updates will not occur fi ANgular is not triggered to update the DOM. 
// Use ngOnChanges in the child to monitor for updates
ngOnChanges(changes: SimpleChanges) {
    if ('fix' in changes) {
        // console.log(this.fix);
    }
    this.doSomething(changes.fix.currentValue);
    this.doSomething(changes.fix.previousValue);
    this.doSomething(changes.fix.firstChange);
}