角度 2 で親から子コンポーネント ビューを更新できません

サウラブ・パラトカル

パンクル:ここ

チャーティスト チャートのレンダリングに使用している子 comp chartist.component があります

私の親コンポーネントapp.tsでは、chartist.component を2 回呼び出して、折れ線グラフと棒グラフをレンダリングしています。

親カンプには、折れ線グラフと棒グラフを更新するボタンがあり、データ変数内のデータを変更するだけで、チャートをレンダリングするために子カンプに渡されます。

私の問題は、更新ボタンをクリックしたときにチャートが 1 回だけ更新されることです。データ オブジェクトが変更されるたびにグラフを更新したいと考えています。

app.ts (親コンポーネント):

import {Component, NgModule, OnInit, AfterViewInit} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {ChartistChart} from './chartist.component'

@Component({
  selector: 'my-app',
  templateUrl: './src/app.html',,
})
export class App implements OnInit, AfterViewInit {
  name:string;
  data: any;
  isFirst:true;
  dataIndex:number;
  allData:any;

  constructor() {
    this.name = 'Angular2'
    this.dataIndex=0;
    this.allData=[{chart data1},{chart data 2}];
  }

   ngOnInit() {  
    this.getAllCharts();
  }

   ngAfterViewInit() {}

  public getAllCharts(){
    this.data= this.allData[this.dataIndex];
    return this.allData[this.dataIndex];
  }

  public updateLineChart(){
    this.isFirst  = !this.isFirst;
    this.dataIndex = this.isFirst?0:1;
    this.data.simpleLineData = this.allData[this.dataIndex].simpleLineData;
    this.data.simpleLineOptions = this.allData[this.dataIndex].simpleLineOptions;
  }

  public updateBarChart(){
    this.isFirst  = !this.isFirst;
    this.dataIndex = this.isFirst?0:1;
    this.data.simpleBarData = this.allData[this.dataIndex].simpleBarData;
    this.data.simpleBarOptions = this.allData[this.dataIndex].simpleBarOptions;
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, ChartistChart ],
  bootstrap: [ App ]
})
export class AppModule {}

app.html:

<div style="width:100%; height:350px">
    <button (click)="updateLineChart()">Update Line chart</button> DataIndex: {{dataIndex}}
    <chartist-chart *ngIf="data" chartistChartClass="ct-chart" chartistChartType="Line" [chartistChartData]="data['simpleLineData']"
              [chartistChartOptions]="data['simpleLineOptions']">
            </chartist-chart>
    </div>
          <br/>  <br/>    
    <div style="width:100%; height:350px">
    <button (click)="updateBarChart()">Update Bar chart</button> DataIndex: {{dataIndex}}
       <chartist-chart *ngIf="data" chartistChartClass="ct-chart" chartistChartType="Bar" [chartistChartData]="data['simpleBarData']"
              [chartistChartOptions]="data['simpleBarOptions']">
            </chartist-chart>
    </div>

chartist.component.ts (子):

import {
  Component, ViewChild, Input, Output, ElementRef, EventEmitter, ChangeDetectorRef 
} from '@angular/core';



@Component({
  selector: 'chartist-chart',
  templateUrl: './src/chartistChart.html',
  providers: [],
})
export class ChartistChart {

  @Input() chartistChartType: string;
  @Input() chartistChartData: Object;
  @Input() chartistChartOptions: Object;
  @Input() chartistChartResponsive: Object;
  @Input() chartistChartClass: string;
  @Output() onChartReady = new EventEmitter<any>();

  @ViewChild('chartistChart') public _selector: ElementRef;

  private chart;
   constructor(private cdr: ChangeDetectorRef){}

  ngAfterViewInit() {
   console.log('chart init', this.chartistChartData)
    let _self = this;
    _self.chart = new Chartist[_self.chartistChartType](_self._selector.nativeElement,
      _self.chartistChartData,
      _self.chartistChartOptions);

    _self.onChartReady.emit(_self.chart);
    this.cdr.detectChanges();
  }



  ngOnChanges(changes) {
    if (this.chart) {
      console.log('chartistChartData changed: ',this.chartistChartData);
      (<any>this.chart).update(this.chartistChartData, this.chartistChartOptions);
    }
  }

  ngOnDestroy(): void {
    if (this.chart) {
      this.chart.detach();
    }
  }
}

chartistChart.html:

<div #chartistChart class="{{chartistChartClass || ''}}"></div>
dfsq

this.getAllCharts()ボタンをクリックするたびに手動で呼び出すだけthis.data、新しいデータ シリーズに再割り当てされます。

public updateLineChart() {
  this.dataIndex = this.dataIndex ? 0 : 1;
  this.getAllCharts();
}

public updateBarChart() {
  this.dataIndex = this.dataIndex ? 0 : 1;
  this.getAllCharts();
}

冗長isFirstフラグを取り除くこともできdataIndexます。これで十分です。そして、あなたは設定する必要はありませんthis.data.simpleBarDataし、this.data.simpleLineDataそれはすでに、テンプレート内の小道具として渡されたとして、あまりにも手動。

デモ: https://plnkr.co/edit/1eyTe5WYFAjL9ssRgdiS?p=preview

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

親で監視可能な子コンポーネントからEventEmitterを使用する方法(角度2)

分類Dev

角度2の子コンポーネントで親コンポーネントの名前を取得するにはどうすればよいですか?

分類Dev

角度2は親コンポーネントから子コンポーネントプロパティにアクセスします

分類Dev

角度2は親コンポーネントから子コンポーネントプロパティにアクセスします

分類Dev

角度2で子から親コンポーネントに値を渡すにはどうすればよいですか?

分類Dev

角度2 @ ViewChildコンポーネントから親コンポーネントを再レンダリングします

分類Dev

Angular 2/4:子コンポーネントビューを更新できません

分類Dev

角度でngを使用せずに、親コンポーネントから子に入力値を渡す方法は?

分類Dev

角度2で、より高い親コンポーネント(直接の親ではない)を子に注入します

分類Dev

角度5で* ngForを使用せずに親コンポーネントから子コンポーネントにデータを送信する方法

分類Dev

子コンポーネントからの角度アクセス親変数

分類Dev

親の子ショーコンポーネントの角度2/4クリックイベント

分類Dev

角度2の親コンポーネントを介してカスタム(html)テンプレートを子コンポーネントに渡す方法は?

分類Dev

Angular2:子コンポーネントのページを更新した後、サービスからデータを取得できません

分類Dev

angle2の子コンポーネントから親コンポーネントを更新する方法

分類Dev

Angular2の子コンポーネントから親コンポーネントを更新する方法

分類Dev

コンポーネントからコンポーネント角度 2 に配列を渡す

分類Dev

子コンポーネント(<ng-content>でラップ)から親コンポーネントへの角度移動メソッドとプロパティ

分類Dev

角度2の履歴からコンポーネントを削除します

分類Dev

親コンポーネントから子コンポーネントに小道具を2回送信する

分類Dev

角度2で1つのコンポーネントから別のコンポーネントにデータを渡す方法は?

分類Dev

オブジェクト全体をあるコンポーネントから別のコンポーネントに角度2で送信する

分類Dev

コンポーネントを角度2/4で動的に追加

分類Dev

角度2:Promiseでコンポーネントの「this」を操作する

分類Dev

角度2のサービスを使用して、子を介して親コンポーネント(メニューの非表示/表示)を制御したい

分類Dev

親コンポーネントからAngular2 +のcomponentFactoryResolverで作成された子コンポーネントにObservableデータを渡します

分類Dev

角度2コンポーネントを属性セレクターで使用できますか?

分類Dev

角度2で1つのコンポーネントから別のコンポーネントに変数値を渡す方法

分類Dev

角度 2 ng-bootstrap タイプの先行コンポーネント - 「ngModel」にバインドできません

Related 関連記事

  1. 1

    親で監視可能な子コンポーネントからEventEmitterを使用する方法(角度2)

  2. 2

    角度2の子コンポーネントで親コンポーネントの名前を取得するにはどうすればよいですか?

  3. 3

    角度2は親コンポーネントから子コンポーネントプロパティにアクセスします

  4. 4

    角度2は親コンポーネントから子コンポーネントプロパティにアクセスします

  5. 5

    角度2で子から親コンポーネントに値を渡すにはどうすればよいですか?

  6. 6

    角度2 @ ViewChildコンポーネントから親コンポーネントを再レンダリングします

  7. 7

    Angular 2/4:子コンポーネントビューを更新できません

  8. 8

    角度でngを使用せずに、親コンポーネントから子に入力値を渡す方法は?

  9. 9

    角度2で、より高い親コンポーネント(直接の親ではない)を子に注入します

  10. 10

    角度5で* ngForを使用せずに親コンポーネントから子コンポーネントにデータを送信する方法

  11. 11

    子コンポーネントからの角度アクセス親変数

  12. 12

    親の子ショーコンポーネントの角度2/4クリックイベント

  13. 13

    角度2の親コンポーネントを介してカスタム(html)テンプレートを子コンポーネントに渡す方法は?

  14. 14

    Angular2:子コンポーネントのページを更新した後、サービスからデータを取得できません

  15. 15

    angle2の子コンポーネントから親コンポーネントを更新する方法

  16. 16

    Angular2の子コンポーネントから親コンポーネントを更新する方法

  17. 17

    コンポーネントからコンポーネント角度 2 に配列を渡す

  18. 18

    子コンポーネント(<ng-content>でラップ)から親コンポーネントへの角度移動メソッドとプロパティ

  19. 19

    角度2の履歴からコンポーネントを削除します

  20. 20

    親コンポーネントから子コンポーネントに小道具を2回送信する

  21. 21

    角度2で1つのコンポーネントから別のコンポーネントにデータを渡す方法は?

  22. 22

    オブジェクト全体をあるコンポーネントから別のコンポーネントに角度2で送信する

  23. 23

    コンポーネントを角度2/4で動的に追加

  24. 24

    角度2:Promiseでコンポーネントの「this」を操作する

  25. 25

    角度2のサービスを使用して、子を介して親コンポーネント(メニューの非表示/表示)を制御したい

  26. 26

    親コンポーネントからAngular2 +のcomponentFactoryResolverで作成された子コンポーネントにObservableデータを渡します

  27. 27

    角度2コンポーネントを属性セレクターで使用できますか?

  28. 28

    角度2で1つのコンポーネントから別のコンポーネントに変数値を渡す方法

  29. 29

    角度 2 ng-bootstrap タイプの先行コンポーネント - 「ngModel」にバインドできません

ホットタグ

アーカイブ