Вопросы Теги

Поскольку обнаруживать изменения с @input оценило Угловой

Привет у меня есть следующий Составляющий сын, который получает объект типа в день посредством @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?

0
задан 07.03.2019, 15:28
2 ответа

В твоем случае ты можешь делать следующее 

@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Г - в.

2
ответ дан 02.12.2019, 06:25
  • 1
    Привет @IIsanchez, спасибо за твой ответ, я комментирую тебе, что уже я был способен обновлять договоренности this.barChartLabels, barChartData, каждый раз, когда работает метод set в день, но что он был бы надо для того, чтобы renderize dinamicamente в виде html? –  Alejandro 25.02.2019, 18:13
  • 2
    Tendrí схвати возможность приводить что-то еще к сбою о có я говорю? возможно в stackblitz.com или что-либо подобное? В любом случае, брось беглый взгляд в этот пример stackblitz.com/edit/… и в эту статью ngdev.space/… , если он мог помогать тебе каким-то образом. И, если твоя переменная barChartData используется в шаблоне для renderizar немного, возможно, что оно не функционирует, использовав mé совсем push –  Ilsanchez 25.02.2019, 18:22

Привет уже удалось решить проблему, сначала, который все было нужно называть методом 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 вид с новыми изменениями.

1
ответ дан 02.12.2019, 06:25
  • 1
    Совершенный, в этом случае, пометь твой ответ как правильная для того, чтобы он смог помогать другим с той же проблемой. С другой стороны, как хорошая практика, пытайся относиться к внутренним свойствам твоих компонентов как неизменные для того, чтобы detecció n изменений углового функционируйте правильно. Например, вместо того, чтобы использовать push, что свора охотничьих собак array, на котором он называется, предпочтительно использовать concat, которые возвращают новую инстанцию. –  Ilsanchez 26.02.2019, 10:04