Angular

Question

这个问题很基本，我知道，但在以下情况下我需要帮助。首先，我想在单个数组中使用 Fix 接口的余额值，将其添加到 chart.js 数据并将名称值添加到标签。

我已经构建了界面和组件。

你可以看到（我看到你把头撞在墙上）我用两行（labels: .... 和 data: ....）做了一个 for 循环，这显示了我的预期。

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 但这将我带到了下一点。稍后不再在构造函数中定义 fix，而是从子组件输出该对象。每次值更改时，图表都应更新。

Answer 1

不确定我是否 100% 关注您，但这是我看到的您的要求：

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

为了强制更新子组件，我这样做了：

父组件视图

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

子组件控制器

// 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);
}

Angular - 将对象更改为数组并使其监听变化

Angular - change objects to array and make it listen to on change

typescript

chart.js

angular-components