如何从页面加载更新用户界面从休息服务

我坚持一个问题，获取角2中的用户界面在加载时填充数据的下拉列表。如何从页面加载更新用户界面从休息服务

我有一个服务，它连接到我们的内部SDK，在SDK中我们有休息的终点，返回observable，所以在我的代码中，我打电话给sdk该方法返回一个可观察和订阅它接收数据，这是工作，因为我可以看到它在网络选项卡我得到的数据回来，但是我的用户界面不会填充，而是奇怪的是，当我点击提交按钮的值出现或作为一个实验，我添加一个带有散列值的url，当我点击它时，似乎也触发了UI，并且下拉列表接收到数据，为什么是这样以及如何将它填充到无需提交任何内容？

export class RequestFormComponent implements OnInit{ 
    reqForm: FormGroup; 
    resultDetails: any[] = []; 

constructor(
    private formBuilder: FormBuilder, 
    private router: Router, 
    private requestDetails: DataServices) {} 

    ngOnInit(): void { 
    this.reqForm = this.formBuilder.group({ 
     acceptedTermsAndConditions: [false, Validators.pattern('true')], 
     itemSelection: ['', [Validators.required]] 
    }); 

    this.getSaleItems(); 
    } 

getSaleItems(): void { 
    this.requestDetails.getForSaleItems() 
    .subscribe((data) => this.resultDetails.push(data[0].itemsLIst)); 
    };

形式：

<form class="saleForm" 
      novalidate 
      (ngSubmit)="fullfillSale()" 
      [formGroup]="saleForm"> 

<select class="lngField" id="itemSelection" formControlName="itemSelection"> <option disabled="disabled" value="">-- Please select an Item --</option> <option *ngFor="let details of resultDetails">Item: {{ details.description }}</option> </select> 

</form>

来源

2017-02-14 Beto

您可以张贴代码片段，以显示你如何结合你的项目的下拉列表？ –

我用一些示例代码更新了我的帖子 – Beto

乍一看，我以为你想为每个“选项”绑定一个值。 '' 当数据返回时，this.resultDetails是否有你所期望的？数据[0] .itemsLIst是否为错字？ –

假设你正在使用的最终版本或更高版本，你可以松FormBuilder和简单地使用FormGroup & FormControl

至于代码，我怀疑你的问题就在这里this.resultDetails.push(data[0].itemsLIst)。是itemsLIst的数组？如果是这样，你应该使用this.resultDetails.push(...data[0].itemsLIst);

这里是plnkr使用FormGroup工作：Select Updated By Service

来源

2017-02-14 10:15:58

如何从页面加载更新用户界面从休息服务

回答

相关问题