时间戳

首页 > 解决方案 > Angular 子组件无法识别输入更改

javascript - Angular 子组件无法识别输入更改

问题描述

您好，我使用父子通信。在父级我有代表图形数据的数组。演示

我的问题是，当我更改数组中的一项时，我不会触发子组件 appchanges。在演示中，我创建了不起作用的示例。当我单击更新时，我想更新子组件图。

我的子组件

import { Component, OnInit, Input, OnChanges } from "@angular/core";
import * as Highcharts from "highcharts";
import { ChartService } from "./chart.service";

@Component({
  selector: "hello",
  template: `
    <highcharts-chart
      [Highcharts]="Highcharts"
      [options]="options"
      [oneToOne]="true"
      [update]="updateFromInput"
      style="width: calc(100% ); height: calc(100% - 17px); display: block;margin-top:15px;overflow: auto !important;"
    >
    </highcharts-chart>
  `,
  styles: [
    `
      h1 {
        font-family: Lato;
      }
    `
  ]
})
export class HelloComponent implements OnInit, OnChanges {
  innerHeight: any;
  innerWidth: any;

  @Input() data: any;

  Highcharts: typeof Highcharts = Highcharts;
  updateFromInput = false;
  options: any;

  constructor(private chart_service: ChartService) {
    this.innerHeight = window.screen.height;
    this.innerWidth = window.screen.width;
  }

  onResize(event) {
    this.innerWidth = event.target.innerWidth;
    this.update();
  }

  ngOnInit() {
    this.update();
  }

  ngOnChanges() {
    console.log(this.data);
    console.log("değişti");
    this.update();
  }

  update() {
    var series = this.chart_service.groupBy(
      this.data.LINE.DATA,
      "GRUP",
      "line"
    );
    var categories = this.chart_service.ArrNoDupe(
      this.data.LINE.DATA.map(x => x.NAME)
    );
    let isLegend = series.length > 1 ? true : false;
    var size = this.innerWidth / (12 / this.data.SIZE) - 30;
    if (this.innerWidth <= 992) {
      size = this.innerWidth - 30;
    }
    this.options = {
      title: { enabled: false, text: "" },
      credits: { enabled: false },
      legend: { enabled: true },
      tooltip: { hideDelay: 0, outside: true, shared: true },
      plotOptions: {
        line: { dataLabels: { enabled: !isLegend }, enableMouseTracking: true }
      },
      yAxis: { title: { enabled: false } },
      xAxis: { categories: categories },
      series: series
    };
  }
}

标签： javascriptangularhighcharts

解决方案

在您的 app.component.ts 中：

filter(id) {
    this.reports.filter(x => x.ID == id)[0] = {
      ID: 3233.0,
    ...
   }
}

Array.prototype.filter不会改变给定的数组，而是返回一个具有过滤属性的新数组。您必须重新分配此值以使 Angular 更改检测检测到此新数组：

filter(id) {
    this.reports = this.reports.filter(x => x.ID == id)[0] = {
      ID: 3233.0,
    ...
   }
}

推荐阅读