静态JSON对象上异步数据的Angular2问题

Question

我的服务中设置了一些我在UI中使用的静态对象。

fetchRulesVariables（）

fetchRuleVariables() {

    let variables = [

        {
            name: 'Credit Funding Type',
            id: 1,
            multiple: false,
            hasOperators: true,
            availableOperators: this.fetchOperators('inResults'),
            inputType: 'single',
            placeholder: 'Select a funding type',
            availableValues: this.fetchFundingInstraments()
        }, {
            name: 'Device Trust Score',
            id: 2,
            multiple: false,
            hasOperators: true,
            availableOperators: this.fetchOperators('gtltResults'),
            inputType: 'text',
            placeholder: 'Enter a value between 0 - 100',
            availableValues: ''
        }
    ]
 return variables;
}

该对象运行另一个函数，该函数向其中添加另一个数据数组，例如availableOperators和availableValues 。 这些也只是静态json对象。

在我的组件中，我有一个函数，使用lodash通过ID提取此数据。

fetchVariableData(id, type) {

    let data = [];

    switch (type) {
        case 'operators':
            data = _.find(this.variables, {id}).availableOperators;
            break;
    }

    return data;

}

在我的组件HTML中，我正在运行ngFor使用我的函数来获取结果。

<li *ngFor="let x of fetchVariableData(1, 'operators')"></li>

这里的问题是我遇到了一些我相信的异步问题。 当我运行此命令时，出现一个错误，提示availableOperators未定义。 但是，如果我将运算符硬编码到fetchVariableData()函数中，则可以正常工作。

在未准备好尝试使用availableOperators情况下，如何处理该异步问题？

这都是静态JSON ，没有HTTP调用。

EDIT1

组件代码：

export class AddRuleComponent implements OnInit {
    variables: any;

    ngOnInit() {
        this.loadVars();
        this.renderAddRuleForm();
    }


    loadVars() {
        this.outcomes = this._mserv.fetchOutcomeTypes();
        this.variables = this._mserv.fetchRuleVariables();
    }

    fetchVariableData(id, type) {

        let data: any;

        switch (type) {
            case 'operators':
                data = _.find(this.variables, {
                    id
                }).availableOperators;
                break;
        }
        return data;
    }

}

服务代码：

fetchRuleVariables() {

    let variables = [

        {
            name: 'Credit Funding Type',
            id: 1,
            multiple: false,
            hasOperators: true,
            availableOperators: this.fetchOperators('inResults'),
            inputType: 'single',
            placeholder: 'Select a funding type',
            availableValues: this.fetchFundingInstraments()
        }, {
            name: 'Device Trust Score',
            id: 2,
            multiple: false,
            hasOperators: true,
            availableOperators: this.fetchOperators('gtltResults'),
            inputType: 'text',
            placeholder: 'Enter a value between 0 - 100',
            availableValues: ''
        }
    ]
 return variables;
}

fetchOperators(type) {

    let operators = [];

    // Based on the set of operators we want
    switch (type) {

        // In Results
        case 'inResults':

            operators.push({
                name: 'In List',
                id: 1,
            }, {
                name: 'Not In List',
                id: 2,
            });

            break;

            // Greater than & Less than
        case 'gtltResults':

            operators.push({
                name: 'Greater Than <',
                id: 3,
            }, {
                name: 'Less Than >',
                id: 4,
            });

            break;

            // Is / is not
        case 'isisnot':

            operators.push({
                name: 'Is',
                id: 5,
            }, {
                name: 'Is Not',
                id: 6,
            });

            break;
    }

    return operators;
}

HTML代码：

 <select class="form-control input-sm" formControlName="operator" [attr.id]="'operator'+i">
   <option value="">Select an Operator</option>
   <option *ngFor="let o of fetchVariableData(1, 'operators') | values" value="{{ o.id }}">{{ o.name }}</option>
 </select>

价值管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'values',  pure: false })
export class ValuesPipe implements PipeTransform {
  transform(value: any, args: any[] = null): any {
    return Object.keys(value).map(key => value[key]);
  }
}

Answer 1

检查组件的生命周期；

如官方指南中所述，您的AddRuleComponent调用ngOnInit（）来获取和初始化组件的数据。

如文档中所述，顺序是构造函数 ， ngOnChanges（） ， ngOnInit（）等等，因此当ngOnInit（）获取值时，您的组件已经检查属性是否已初始化/突变，这就是为什么fetchVariableData（ ）可以使用无效的参数（从ngOnChanges（）发生）调用，从而导致未定义的错误，因为_.find(...)并未按预期返回变量对象。

我会先尝试初始化：

variables: any = [];

然后在容器上执行*ngIf="variables.length" ，或将初始化移动到构造函数。