Angular4如何在確認它不是未定義的情況下從父組件變量中分配變量

我有一個從父組件繼承的子組件。Angular4如何在確認它不是未定義的情況下從父組件變量中分配變量

父組件正在執行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>

我怎樣才能確保我可以分配給this.filterableData當值在組件本身中沒有定義？在模板中，我可以使用* ngIf，但是如何在組件級別執行？ dropDownSelectedValue未明確分配，因爲* ng如果簽入模板。

來源

2017-10-11 Amel Salibasic

當subscribe()返回數據時，您有機會在那裏做一些事情。我看到兩個選項：

保持在ChartComponent只有get()爲觀測和可訂閱它在ChildComponent。因此，在subscribe()中，您可以將結果重新分配給filterableData。
保持get()它是如何以及在其中調用不轉換的Component的方法，但在Component它是空的，而你忽略它在ChildComponent做你想要什麼就有什麼

來源

2017-10-11 11:51:58 Zolcsi

不是第一個選項在子組件中執行api請求嗎？我有兩個子組件，主要原因是爲了避免兩個API請求。 –

啊。無論如何，我認爲它有兩個要求。然後，你想要做的就是把這個get（）放入一個服務類的方法中，並將結果賦給服務中的類屬性。當你調用這個方法時，檢查它是否有價值。如果是，返回，如果不是，請打電話。 – Zolcsi

erm可觀察與獲取請求正在服務，然後我訂閱它在父組件。我可以輕鬆地將數據傳遞給子組件，它可以執行一個請求，並且我有兩個@input數據傳入兩個子組件。唯一的問題是我不知道如何處理重新分配給子組件中的其他數組。除非我在父組件中分配了額外的數組，但我認爲這不是很好，並且我想學習如何在這種情況下在子組件中操作。 –

我解決它沒有繼承，因爲繼承它仍然在做兩個請求。

我聲明在父組件變量：

dashboardData: any[];

然後，在我通過dashboardData（它是數組，但testProgress和testSecondProgress嵌套陣列，以及我通過每個對應子組件）父組件的模板：

<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這會引發錯誤數據未定義。

來源

2017-10-12 08:45:04

Angular4如何在確認它不是未定義的情況下從父組件變量中分配變量

回答

相關問題