如何推JavaScript數組到一個數組中角

角分量從解析JSON和在陣列返回它的JavaScript文件接收陣列。但是，我有一個問題，模板中的組件不能識別變量jsonArray:any，它表示它是未定義的。如何推JavaScript數組到一個數組中角

import {Component, NgModule} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 
import '../assets/js/jsonReader.js' 

declare var myExtObject: any; 
declare var webGlObject: any; 

@Component({ 
    selector: 'app-root', 
template: ` 
    <div> 
     {{jsonArray.name}} 
    </div> 
    `, 
}) 
export class AppComponent { 

test: Object[]; 
jsonArray:any; 
output = []; 

    constructor() { 
    this.jsonArray = webGlObject.init(); 
    } 

}

這是這是JavaScript代碼

var webGlObject = (function() { 
    return { 
    init: function() { 
     getJsonArryObject(); 
    } 
    } 
})(webGlObject || {}) 

function getJsonArryObject() { 
    loadJSON(function (response) { 
    // Parse JSON string into object 
    var js = JSON.parse(response); 
    }); 

    //return getObjects(js, key, val); 
}

這是JSON文件

[ 
    { 
    "name": "ar", 
    "hasTributaryInfo": true, 
    "hasTributaryInfoMandatory": false, 
    "isRazonSocialMandatory": true, 
    "isRUCMandatory": false, 
    "array": [ 
     1, 
     2, 
     3 
    ] 
    }, 
    { 
    "name": "sa", 
    "hasTributaryInfoMandatory": true, 
    "hasTributaryInfo": true, 
    "isRazonSocialMandatory": true, 
    "isRUCMandatory": true, 
    "object": { 
     "a": "b", 
     "c": "d", 
     "e": "f" 
    } 
    }, 
    { 
    "name": "co", 
    "hasTributaryInfoMandatory": false, 
    "hasTributaryInfo": false, 
    "isRazonSocialMandatory": false, 
    "isRUCMandatory": false 
    } 
]

來源

2017-05-25 user2183605

你的初始化函數不返回任何東西，所以當你做'this.jsonArray = webGlObject.init（）;'你將this.jsonArray設置爲undefined。 – James

loadJSON（）是做什麼的？它是一個庫還是你自己的實現？ – andreim

解決方案1 ：您可以使用觀測量：

var webGlObject = (function() { 
    return { 
    init: function() { 
     return getJsonArryObject(); 
    } 
    } 
})(webGlObject || {}) 

function getJsonArryObject() { 
    let subject = new Subject(); 

    loadJSON(function (response) { 
    // Parse JSON string into object 
    var js = JSON.parse(response); 
    subject.next(js); 
    subject.complete(); 
    }); 

    return subject; 
}

然後，你可以有：

@Component({ 
    selector: 'app-root', 
template: ` 
    <div *ngFor="let item in jsonArray$ | async"> 
     {{ item.name }} 
    </div> 
    `, 
}) 
export class AppComponent { 

jsonArray$: Observable<any>; 

    constructor() { 
    this.jsonArray$ = webGlObject.init(); 
    } 
}

解決方案2：您可以使用承諾：

var webGlObject = (function() { 
    return { 
    init: function() { 
     return getJsonArryObject(); 
    } 
    } 
})(webGlObject || {}) 

function getJsonArryObject() { 
    return new Promise((resolve, reject) => { 

    loadJSON(function (response) { 
     // Parse JSON string into object 
     var js = JSON.parse(response); 
     resolve(js); 
    }); 
    }); 
}

然後，你可以有：

@Component({ 
    selector: 'app-root', 
template: ` 
    <div *ngFor="let item in jsonArray"> 
     {{ item.name }} 
    </div> 
    `, 
}) 
export class AppComponent { 

jsonArray: any[] = []; 

    constructor() { 
    webGlObject.init().then(data => this.jsonArray = data); 
    } 
}

來源

2017-05-25 21:16:42 andreim

比你，它與觀察對象 – user2183605

如何推JavaScript數組到一個數組中角

回答

相關問題