如何从服务中填充选项项

Question

我有一个angular应用，在这个应用中，我必须从后端填充下拉列表。

.component.ts

public getMemberCodes() {
let baseUrl = `/endpoindAPI`;
this._restfulService
.restfulGetData(baseUrl)
.subscribe(
(actionLookupData: ActionLookupData) => {
if (actionLookupData) {
this.option1Codes = actionLookupData.Option1Codes;
this.option2Codes = actionLookupData.Option2Codes;
this.option3Codes = actionLookupData.Option3Codes;

}
},
(err) => {
console.error(err);
}
);
}

从上面的服务中，我必须填充每个类别的值，如this.option1Codes,this.option1Codes等

响应如下:

Option1Codes: [{Category: "Category1" ActionStatusTypeID: 1,Complete"， ActionID: 5060，…}]Option2Codes: [{Category: "Category2" ActionStatusTypeID: 1,Complete"， ActionID: 5060，…}]

从上面的数组中，我必须从后端在下拉列表中填充类别值。

.component.html

<select    class="form-control"  required>
<option>
//code 
</option>
</select>

Answer 1

你可以使用ngFor指令:

select *ngFor="let optionCode of OptionCodes">{{link}}

我建议你看一下关于这件事的官方文件

Answer 2

如果你有Only on List

Option1Codes: [{Category: "Category1", ActionStatusTypeID: 1,Complete", ActionID: 5060,…}]

这样用

<select  *ngFor="let optionCode of Option1Codes"  class="form-control"  required>
<option>
{{optionCode?.Category}}
</option>
</select>

我看到你有三个列表option1Codes,option2Codes,option3Codes.

如果你想在一个列表中，那么你必须将所有列表添加到一个数组中像这样…

let list = [...option1,...option2,...option3];
<select  *ngFor="let optionCode of list"  class="form-control"  required>
<option>
{{optionCode?.Category}}
</option>
</select>