来自API的值未附加到Angular2 Dropdown

时间:2017-07-13 13:43:30

标签: javascript angular angular2-template

我有以下项目流程结构:

import_product.html



<div class="row custom_row">
                    <div class="col-md-2">Additional Duty: </div> 
                    <div class="col-md-2">
                        <select class="form-control" [(ngModel)]="product.additional_duty_not_no" (change)="changeAddDutyNotSrNo()" required="required">
                            <option value=" ">-- SELECT --</option>
                            <option *ngFor="let add_duty_not_no_data of product.addl_duty_not_nos" value="{{ addl_duty_not_no_data.notification_no }}">{{ addl_duty_not_no_data.notification_no }}</option>
                        </select>
                    </div>
&#13;
&#13;
&#13;

import_product_component.ts

getAddlNotificationDuty() {
    var url = 'api/getBasicNotificationDuty';
    var add_duty_not_no_data : any;
    var ref = this;

    this.jobService.loadRemoteUrl(url)
        .subscribe(
        data => { add_duty_not_no_data = data},
        err => console.error(err),
        () => {
            if (add_duty_not_no_data.length > 0) {
                ref.product.addl_duty_not_nos = add_duty_not_no_data;
            }
        }
    );  
}

现在调用由Laravel PHP驱动的API后端,该后端以下列数组格式成功返回所需数据:

[{"notification_no":"012/39"},{"notification_no":"007/97"},{"notification_no":"999/85"}]

但不幸的是,前端的下降并未充满相关价值。控制台中没有错误。

console.log ,直到.ts组件显示成功返回的对象,但没有附加到下拉列表。

如果您想了解更多详情,请与我们联系。任何帮助将受到高度赞赏。

1 个答案:

答案 0 :(得分:1)

你在哪里

basic_duty_not_no_data

这?

我还建议使用稍微不同的流处理ajax调用

add_duty_not_no_data: any

getAddlNotificationDuty() {
    var url = 'api/getBasicNotificationDuty';

    this.jobService.loadRemoteUrl(url)
        .subscribe(
            data => {
                if (data.length > 0) {
                    this.add_duty_not_no_data = data;
                }                
            },
            err => console.error(err)
        );
}