Angular4親コンポーネントの変数から子コンポーネントの変数を割り当てる方法を定義していないことを確認してから

Question

親コンポーネントから子コンポーネントを継承しています。

親コンポーネントが、APIコンポーネントのリクエストを行い、子コンポーネントにデータを渡しています。

親コンポーネント：

export class ChartComponent implements OnInit { 

    @Input() 
    protected exercisesData: any[]; 
    @Input() 
    protected weightData: any[]; 

    /** 
    * 
    */ 
    constructor(public dataService: DataService) { 
    } 

    ngOnInit(): void { 
     this.dataService.setEndpoint('/api/dashboard/get'); 
     this.get(); 
    } 

    private get() { 
     this.dataService 
      .Get() 
      .subscribe(data => { 
       this.exercisesData = Object.assign({}, data); 
       this.weightData = Object.assign({}, data); 

       console.log(this.exercisesData); 
       console.log(this.weightData); 
      }, (error) => { 
       console.log(error); 
      }); 
    } 
} 

子コンポーネント：子コンポーネントの

export class ExercisesProgressChartComponent extends ChartComponent{ 

    private filterableData: any[]; 
    private dropDownSelectedValue: string; 

    ngOnInit(): void { 
     this.dropDownSelectedValue = "0"; 
     this.filterableData = Object.assign({}, this.exercisesData); 
    } 

    private onDropDownChange(dropDownSelectedValue) { 

     if(dropDownSelectedValue == "0"){ 
      this.filterableData = Object.assign({}, this.exercisesData); 
     } 
     else{ 
     this.filterableData = Object.assign({}, this.exercisesData); 
     this.filterableData["exercisesProgress"] = this.filterableData["exercisesProgress"].filter(x=>x.id == dropDownSelectedValue); 
     } 
    } 

} 

は、テンプレート：

<div *ngIf="exercisesData" class="dashboard"> 
    <div class="form-group"> 
      <select class="form-control" [(ngModel)]="dropDownSelectedValue" (ngModelChange)="onDropDownChange($event)" sele> 
         <option [value]="0">All Exercises</option> 
       <option *ngFor="let x of exercisesData.exercisesProgress" [value]="x.id">{{x.name}}</option> 
      </select> 
      <small id="exerciseNameHelp" class="form-text text-muted">Please select exercise for filtering</small> 
    </div> 

    {{exercisesData.exercisesProgress | json}} 
    {{filterableData.exercisesProgress | json}} 

<ngx-charts-line-chart 
    [scheme]="{domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']}" 
    [results]="filterableData.exercisesProgress" 
    [gradient]="false" 
    [xAxis]="true" 
    [yAxis]="true" 
    [legend]="true" 
    [showXAxisLabel]="true" 
    [showYAxisLabel]="true" 
    [xAxisLabel]="Date" 
    [yAxisLabel]="Weight" 
    [autoScale]="true" 
    (select)="onSelect($event)"> 
</ngx-charts-line-chart> 
</div> 

どのように私は時に値Iがthis.filterableDataに割り当てることができることを確認することができますコンポーネント自体に未定義ではありませんか？テンプレートでは* ngIfを使用できますが、コンポーネントレベルでどのように行うことができますか？また、dropDownSelectedValueは、* ngIfチェックインテンプレートのために明らかに割り当てられていません。

Answer 1

subscribe()がデータを返すと、そこで何かすることができます。

• 観察可能なようChartComponentのみget()に保ち、ChildComponentでそれを購読する：私は2つのオプションが表示されます。したがって、subscribe()では、結果をfilterableDataに再割当てすることができます。
• 私は解決それがどのようにget()をキープして変換を行いComponentでメソッドを呼び出しますが、Componentで、それは空で、あなたがそこに

Answer 2

やりたいChildComponentでそれをオーバーライドしますそれは継承なしでまだ2つの要求をしていたからです。

Iは、親コンポーネント内の変数を宣言：

dashboardData: any[]; 

そしてIはdashboardDataを通過した親コンポーネントのテンプレートに（それが配列であるが、testProgressとtestSecondProgressはネストされた配列であり、そしてIは、対応する子コンポーネントにそれぞれ渡さ）：

<div *ngIf="dashboardData"> 
     <test-progress-chart [data]="dashboardData.testProgress"></test-progress-chart> 
     <test-second-progress-chart [data]="dashboardData.testsecondProgress"></test-second-progress-chart> 
</div> 

は、その後、私は私にデータを渡したい子コンポーネントで変数を宣言した：

@Input() 
data: any[]; 

新規参入のために

、あなたが行動リンク見ることができます：

dashboardData - > [データ] - >データ@Input：任意の[]

また重要なことは、変数を持つことができるようにするために子コンポーネントに満たされたデータ親テンプレートに* ngIfでレンダリングする前に、それを待つことを忘れないでください：

<div *ngIf="dashboardData"> 

API要求は非同期であり、あなたが待っていない場合、それは前にテンプレートをレンダリングしようとしますので、データiエラーがスローされますデータは定義されていません。