Angular表单初始加载默认值问题：无法默认选中首个选项

核心问题分析 #

1. 产品下拉绑定类型不匹配：mat-option的[value]绑定的是producto.id（数值/字符串类型），但你初始化时给parametros.producto赋值的是完整产品对象，导致无法匹配选中项。
2. 品种下拉未做初始联动与选中设置：多选模式下ngModel需绑定数组，且初始未筛选对应首个产品的品种，也未设置默认选中值。

第一步：修正产品下拉默认选中 #

修改TS代码中产品默认值的赋值逻辑，从完整对象改为对应id：

// 原代码
this.parametros['producto'] = this.listadoProductos[0];
// 修改为
this.parametros['producto'] = this.listadoProductos[0]?.id; // 可选链避免空数组报错

第二步：初始化品种下拉的联动数据与默认选中 #

在初始化产品数据后，同步筛选对应品种并设置默认选中（多选模式需用数组）：

this.listadoProductos = this.resolucionDatosCargados['listProduct'].map(item => ({
  id: item[0],
  name: item[1]
}));
// 先设置产品默认值
this.parametros['producto'] = this.listadoProductos[0]?.id;

this.listadoVariedad = this.resolucionDatosCargados['listVariety'].map(item => ({
  id: item[0],
  idVar: item[1],
  name: item[2]
}));

// 初始筛选对应首个产品的品种
if (this.parametros.producto) {
  this.listadoVariedadCombo = this.listadoVariedad.filter(v => v.id === this.parametros.producto);
  // 多选模式下默认选中首个品种（不需要可删除此行）
  this.parametros['variedad'] = this.listadoVariedadCombo.length > 0 ? [this.listadoVariedadCombo[0].idVar] : [];
} else {
  this.listadoVariedadCombo = [];
  this.parametros['variedad'] = [];
}

this.changeTypeSerie();

第三步：确认模板绑定一致性 #

当前模板的绑定逻辑无需修改：

• 产品下拉的[(ngModel)]="parametros.producto"与mat-option的[value]="producto.id"类型已匹配
• 品种下拉的多选模式[(ngModel)]="parametros.variedad"绑定数组，与mat-option的[value]="variedad.idVar"类型匹配

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