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>

当组件本身未未定义值时，如何确保可以分配给this.filterableData？ 在模板中，我可以使用* ngIf，但是如何在组件级别使用它呢？ 另外，由于* ngIf签入模板，显然未分配dropDownSelectedValue 。

Answer 1

当subscribe()返回数据时，您将有机会在那里做某事。 我看到两个选择：

• 将get()保留为可观察ChartComponent仅保留在ChartComponent ，并在ChildComponent中对其进行ChildComponent 。 因此，在该subscribe()您可以将结果重新分配给filterableData 。
• 保持get()不变，并在执行转换的Component调用一个方法，但是在Component该方法为空，然后在ChildComponent重写它以执行ChildComponent的操作

Answer 2

我没有继承就解决了它，因为有了继承，它仍然在做两个请求。

我在父组件中声明了变量：

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[];

对于新手，您可以看到链接行为：

仪表盘数据-> [数据]-> @输入数据：任意[]

同样重要的是，要能够在子组件中填充变量数据，请不要忘记在父模板中使用* ngIf渲染之前等待它：

<div *ngIf="dashboardData">

由于api请求是异步的，如果您不等待，它将尝试在数据返回之前渲染模板，这将引发错误data undefined 。