Angular下拉框值异常：路由ID赋值后仍被识别为undefined

核心问题：自定义select-input组件的ControlValueAccessor实现不完整 #

你的自定义组件声明实现了ControlValueAccessor接口，但核心的writeValue和registerOnChange方法是空实现，直接导致ngModel双向绑定完全失效：

• 父组件在ngOnInit中给selectedCatId赋值的路由ID，无法同步到子组件的ng-select中
• 子组件的选中状态变化也无法正确同步回父组件的selectedCatId
  另外，ng-select同时使用[formControl]和[(ngModel)]会引发绑定冲突，Angular不建议混用这两种方式。

解决方案步骤 #

1. 修复自定义select-input组件的ControlValueAccessor实现 #

修改select-input.component.ts，完善ControlValueAccessor的核心方法，移除冗余的@Input() value，改用内部变量维护选中状态：

import { Component, Input, OnInit, Self } from '@angular/core';
import { ControlValueAccessor, NgControl } from '@angular/forms';
import { TranslateService } from '@ngx-translate/core';
import { DefaultLanguages } from 'path-to-your-enum-file';

@Component({
  selector: 'app-select-input',
  templateUrl: './select-input.component.html',
  styleUrls: ['./select-input.component.css']
})
export class SelectInputComponent implements ControlValueAccessor, OnInit {
  @Input() list: any[];
  @Input() label: string;
  @Input() bindLabel: string = 'labelEn';
  @Input() bindValue: string = 'value';
  @Input() inputId: string = null;
  @Input() disabled: boolean = false;
  @Input() class: string;

  private innerValue: any;
  private onChange: (value: any) => void;
  private onTouched: () => void;

  constructor(
    @Self() public ngControl: NgControl,
    private translate: TranslateService
  ) {
    this.ngControl.valueAccessor = this;
  }

  ngOnInit(): void {
    this.translate.onLangChange.subscribe((lang) => {
      this.bindLabel = lang.lang === DefaultLanguages.en ? 'labelEn' : 'labelAr';
    });
  }

  writeValue(obj: any): void {
    this.innerValue = obj;
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  setDisabledState(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }

  modelChange(args: any): void {
    this.innerValue = args;
    this.onChange?.(args);
    this.onTouched?.();
  }
}

修改select-input.component.html，移除冲突的[formControl]绑定，简化模板：

<div>
  <ng-select
    [class.is-invalid]="ngControl.touched && ngControl.invalid"
    placeholder="--Select"
    [style]="class"
    [(ngModel)]="innerValue"
    [disabled]="disabled"
    (ngModelChange)="modelChange($event)"
  >
    <ng-option *ngFor="let row of list" [value]="row[bindValue]">
      {{ row[bindLabel] }}
    </ng-option>
  </ng-select>

  <div *ngIf="ngControl.control?.errors?.['required'] && ngControl.touched" class="invalid-feedback">
    {{ label }} is required
  </div>
</div>

2. 修复父组件逻辑，确保路由ID正确生效 #

调整父组件代码，等待分类数据加载完成后再触发课程查询，避免因选项未初始化导致选中值被重置：

import { Observable } from 'rxjs';
// ...其他导入

selectedCatId: number | null = null;

ngOnInit(): void {
  const routeId = this.activeRoute.snapshot.paramMap.get('id');
  this.selectedCatId = routeId ? +routeId : null;

  // 分类加载完成后自动触发课程查询
  this.getCourseCategories().subscribe(() => {
    this.loadAvailableCourses(this.selectedCatId);
  });
}

getCourseCategories(): Observable<Result<CourseCategoryDto[]>> {
  const request$ = this.traineeService.Get('ListTraineeAvailableCourseCategories');
  request$.subscribe(
    (response: Result<CourseCategoryDto[]>) => {
      this.categories = response.data.map(x => ({
        labelEn: x.titleEn,
        labelAr: x.titleAr,
        value: x.id,
      }));
    },
    (error) => {
      this.notifyService.ShowNotification(
        StatusResult.Falid,
        'Error loading available categories'
      );
    }
  );
  return request$;
}

loadAvailableCourses(catId: number | null) {
  const params = {
    CourseCategoryId: catId
  };
  this.traineeService.GetBy(params, 'ListTraineeAvailableCourses').subscribe(
    (response: Result<CourseCycleDto[]>) => {
      this.courses = response.data;
    },
    (error) => {
      this.notifyService.ShowNotification(
        StatusResult.Falid,
        'Error loading available courses'
      );
    }
  );
}

3. 额外注意事项 #

• 确保路由参数id的类型与分类ID一致（均为数字），避免类型不匹配导致选中失败
• 确认后端接口支持CourseCategoryId为null时返回全量数据，若接口需要特殊处理（如不传该参数），需调整GetBy的传参逻辑
• 父组件中必须正确声明selectedCatId的初始类型：selectedCatId: number | null = null;

内容的提问来源于stack exchange，提问作者b.g