Angular 2 - ng-select - 从 JSON 文件中获取数据

debugcn 发表于 Dev

贾米尔89

我安装了 ng-select 组件，它允许我在可编辑的选择中显示自动完成程序。

我试图通过 JSON 获取此选择的选项，但这对我不起作用！

这项工作 - 组件：

prodFilterDescr: Array<IOption> = [
        {label: 'Belgium', value: 'Belgium'},
        {label: 'Luxembourg', value: 'Luxembourg'},
        {label: 'Netherlands', value: 'Netherlands'}
    ];

网址：

        ...<ng-select
                [options]="prodFilterDescr"
                placeholder="Prodotto"
        >
        </ng-select>...

这不起作用 - 组件（在 costructor 中）：

        this.http.get('app/json/filtriProdotti.json')
        .subscribe(res => this.filters = res.json());
        var filter = [];
        this.filters.forEach(function(item){
            filter.push(item.tipoProdottoId)
        })  
        console.log(filter)   
        let typeProdFilter: Array<IOption> = filter;
        console.log(typeProdFilter)

网址：

            <ng-select
                    [options]="typeProdFilter"

                    placeholder="Tipo prodotto"
            >
            </ng-select>

似乎无法读取在 costructor 或其他方法中写入的内容......我怎样才能让我的“选项”到达我的 JSON 数据？

维维克多西

问题与方法async调用有关http.get

尝试运行此代码：

// define this outside of constructor
typeProdFilter: Array<IOption>;

// keep this inside the constructor
this.http.get('app/json/filtriProdotti.json')
.subscribe(res => 
{
    this.filters = res.json()
    var filter = [];
    this.filters.forEach(function(item){
        filter.push(item.tipoProdottoId)
    })  
    console.log(filter)   
    this.typeProdFilter = filter;
    console.log(this.typeProdFilter)
});

对于动态加载选项，请也检查一下：

https://basvandenberg.github.io/ng-select/examples/load-options

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。