使用 Angular ng-select，如何在选择选项中显示 JSON 响应中的 id 和名称？

Question

我正在使用 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 ERROR TypeError：无法读取未定义的属性（读取“值”）

我需要将 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 来显示我正在谈论的内容。 堆栈闪电战

Answer 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);
  }