Привет у меня есть следующий Составляющий сын, который получает объект типа в день посредством @input
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, чтобы сообщать мне, когда произойдут изменения, console.log метод ngOnChanges (currentValue) действительно изменяет стоимость в зависимости от изменения в составляющем отце, но как он мог бы делать для renderizar denuevo компонент, и что направили в setear новые переменные, когда объект день изменится так что actualize вид dinamicamente?
В твоем случае ты можешь делать следующее
@Input() set día(_dia: any[]): void {
for (let index = 0; index < _dia.length; index++) {
this.barChartData[0].data.push(_dia[index][7]);
this.barChartData[1].data.push(_dia[index][15]);
this.barChartData[2].data.push(_dia[index][12]);
this.barChartLabels.push(_dia[index][6]);
}
}
Таким образом ejecutarГЎ cГіdigo из сеттера каждый раз, когда в твой компонент прибыла новая стоимость. Альтернативно, ты можешь выполнять с собой в тебе ngOnChanges
, но в этом случае deberГ-схвати подтверждать, который является неударом в лунку, который изменился, и выполнять это только в случае, если он будет dГ - в.
Привет уже удалось решить проблему, сначала, который все было нужно называть методом set каждый раз, когда производилась новая стоимость _dia: any [], такой который как он это объясняет @Ilsanchez, кроме того исследуя немного оказывается, что это лучший выбор, когда имеются мало переменных, которые меняются, он состоит по этой причине в том, что не осуществляется метод ngOnChanges,
@Input() set dia(_dia: any[]) {
this.barChartLabels = Object.assign([], []);
this.barChartLabels.length = 0;
this.barChartData[0].data.length = 0;
this.barChartData[1].data.length = 0;
this.barChartData[2].data.length = 0;
for (let index = 0; index < _dia.length; index++) {
this.barChartData[0].data.push(_dia[index][7]);
this.barChartData[1].data.push(_dia[index][15]);
this.barChartData[2].data.push(_dia[index][12]);
this.barChartLabels.push(_dia[index][6]);
}
}
этот метод действительно выполняет каждый раз, когда переменная меняется однако эту он не изменял вид, так как имелась та же ссылка на объект barChartLabels, решение в этом случае состояло в том, чтобы использовать Object.assign ([], []); который меняет referenia объекта, и угловой будет способен renderizar вид с новыми изменениями.
push
, что свора охотничьих собак array, на котором он называется, предпочтительно использовать concat
, которые возвращают новую инстанцию.
– Ilsanchez
26.02.2019, 10:04
barChartData
используется в шаблоне для renderizar немного, возможно, что оно не функционирует, использовав mé совсемpush
– Ilsanchez 25.02.2019, 18:22