提问人：fearless924 提问时间：11/16/2023 更新时间：11/16/2023 访问量：27
使用 Angular ng-select，如何在 select 选项中显示 JSON 响应中的 id 和 name？
Using Angular ng-select, How can I display the id and name from a JSON response in the select option?
问：
我正在使用 ng-select 显示 API 中的项目。
{
"endPosition": "590",
"envelopeTemplates": [
{
"name": "Template One",
"templateId": "39739845739850"
},
{
"name": "Template Two",
"templateId": "340982059270"
},
{
"name": "Template Three",
"templateId": "478979796768"
}
]
}
这就是我使用 ng-select 在下拉列表中显示项目的方式。
<ng-select placeholder="Select Template" #templates (change)="onChange()">
<ng-container *ngFor ="let t of templateData.envelopeTemplates">
<ng-container *ngIf="t.name && t.templateId">
<ng-option value="{{t.templateId}}">{{t.name}}</ng-option>
</ng-container>
</ng-container>
在我的代码中，您可以看到我从请求中提取名称，但我还需要在值中显示 id。当我运行它时，我收到此错误，main.js：36218错误类型错误：无法读取未定义的属性（读取“值”）
我需要将 templateID 绑定到值，因为当用户选择一个选项时，该 id 用于向 API 发送请求以获取有关该模板的更多数据。其他一切都很好，我只是被困在这个问题上。这也是一种反应形式。这是方法。
getTemplates(){
this.templateFieldService.getTemplate().subscribe((temp: Template) => {
if(temp){
this.templateData = temp;
this.templateData.envelopeTemplates.forEach(temp =>{
this.tempData?.push(temp.name);
this.tempId?.push(temp.templateId);
})
}
console.log(this.templateData)
});
我创建了一个 StackBlitz 来显示我在说什么。堆栈闪电战
答：
0赞
oksd
11/16/2023
#1
改变FormGroup
envelopeRequest = this.fb.group({
name: '',
email: '',
optionRequest: null,
});
加formControlName
<form [formGroup]="envelopeRequest">
<div>
<ng-select
placeholder="Select Template"
#templates
(change)="onChange()"
formControlName="optionRequest"
>
<ng-container *ngFor="let t of templateData.envelopeTemplates">
<ng-container *ngIf="t.name && t.templateId">
<ng-option value="{{t.templateId}}">{{t.name}}</ng-option>
</ng-container>
</ng-container>
</ng-select>
</div>
</form>
访问FormControl
onChange() {
console.log(this.envelopeRequest.get('optionRequest')?.value);
}
评论