您好,我有以下子组件通过@input 接收类型为 day 的对象
import { Component, OnInit, Input,OnChanges,SimpleChanges} from '@angular/core';
import { TiempoService } from './../../services/tiempo.service';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-graphs',
templateUrl: './graphs.component.html',
styleUrls: ['./graphs.component.css']
})
export class GraphsComponent implements OnInit, OnChanges {
@Input() dia:any[] =[];
public barChartOptions:any = {
scaleShowVerticalLines: false,
responsive: true
};
public barChartLabels:string[] = [];
public barChartType:string = 'bar';
public barChartLegend:boolean = true;
public barChartData:any[] = [
{data: [], label: 'Temperatura'},
{data: [], label: 'Humedad'},
{data: [], label: 'Cobertura Nubosa'}
];
constructor() {
console.log(this.barChartData);
}
ngOnInit() {
for (let index = 0; index < this.dia.length; index++) {
this.barChartData[0].data.push(+this.dia[index][7]);
this.barChartData[1].data.push(+this.dia[index][15]);
this.barChartData[2].data.push(+this.dia[index][12]);
this.barChartLabels.push(this.dia[index][6]);
}
console.log(this.dia);
}
ngOnChanges(changes: SimpleChanges) {
console.log(changes.dia);
}
}
但是这个值会根据父组件而变化,实现 ngOnChanges 方法以在发生更改时通知我, ngOnChanges (currentValue) 方法的 console.log 会根据父组件中的更改有效地更改值,但是我该如何渲染组件并在日对象更改时重置新变量以便动态更新视图?
在您的情况下,您可以执行以下操作
这样,每次有新值到达您的组件时,都会执行 setter 的代码。或者,您可以在您的 .get 上运行 get
ngOnChanges
,但在这种情况下,您应该检查哪个输入已更改,并仅在当天运行它。您好,我设法解决了这个问题,首先我必须在每次生成 _dia:any[] 的新值时调用 set 方法,正如@Ilsanchez 所解释的那样,也做了一些研究,结果是当变量很少发生变化时的最佳选择,这就是未实现 ngOnChanges 方法的原因,
每次变量更改时都会有效执行此方法,但是它没有修改视图,因为它对 barChartLabels 对象具有相同的引用,这种情况下的解决方案是使用 Object.assign([], []); 更改对象引用和角度将能够使用新更改呈现视图。