如何在Angular ng-select中动态绑定templateId并解决取值报错问题？

我用ng-select展示API返回的模板数据，当前代码如下：

<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>
</ng-select>

我需要把templateId绑定到ng-option的value上，用户选择后用该ID调用API获取模板详情，但运行时报错：main.js:36218 ERROR TypeError: Cannot read properties of undefined (reading 'value')。

该组件属于响应式表单，我的getTemplates方法代码如下：

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示例以展示问题。

1. 修复ng-option的value绑定方式 #

不要用插值表达式{{t.templateId}}，改用属性绑定[value]="t.templateId"，确保值以正确的类型传递，避免插值可能引发的类型不匹配问题：

<ng-option [value]="t.templateId">{{t.name}}</ng-option>

2. 响应式表单的正确绑定方式 #

既然是响应式表单，建议直接将ng-select与表单控件绑定，替代模板引用变量#templates，这样能更安全地获取选中值：

• 在组件类中定义表单控件：

  import { FormControl, FormGroup } from '@angular/forms';
  
  // 根据实际业务定义表单组
  templateForm = new FormGroup({
    selectedTemplateId: new FormControl('')
  });
  

• 模板中绑定表单控件：

  <ng-select placeholder="Select Template" [formControl]="templateForm.get('selectedTemplateId')">
    <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>
  

• 获取选中值时直接从表单控件取值：

  onChange() {
    const selectedId = this.templateForm.get('selectedTemplateId')?.value;
    if (selectedId) {
      // 调用API获取模板详情的逻辑
    }
  }
  

3. 避免templateData未初始化的报错 #

在模板中添加空值保护，防止API返回前访问envelopeTemplates：

<ng-container *ngFor="let t of templateData?.envelopeTemplates">

或者在组件类中提前初始化templateData：

// 根据你的Template接口结构初始化空值
templateData: Template = { envelopeTemplates: [] };

4. 移除冗余代码 #

getTemplates方法中的tempData和tempId数组未在模板中使用，可直接删除，简化代码：

getTemplates(){
this.templateFieldService.getTemplate().subscribe((temp: Template) => {
  if(temp){
    this.templateData = temp;
  }
  console.log(this.templateData)
});

内容的提问来源于stack exchange，提问作者fearless924