将下拉 angular 的选定值从一个组件保留到另一个组件 Angular

如何解决将下拉 angular 的选定值从一个组件保留到另一个组件 Angular

嗨，我有一个名为 switchercomponent 的常见下拉列表，它用于两个组件中，一个名为 detail，另一个名为 edit 所以 detailComponent 和 editComponent 有相同的下拉组件，名为 switcherComponent 。 detailComponent 和 editComponent 是 masterComponent 的子级

在 detailComponent 和 editComponent 中，我在各自的模板中调用了如下所示的开关组件

 <switcher (onChange)="studentFileChanged($event)" ></switcher>

在detailComponent 中，当用户从switchcomponent 中进行选择然后单击edit button 时，editcomponent 被调用，我们有相同的switchercomponent。我的问题是，当用户从detailcomponent 中的下拉切换器中选择一个值，然后单击edit 按钮时，从detailcomponent 中的switcher 组件中select drop 的值不会保留在editcomponent 中。我已经使用 this.onChange.emit() 来更新切换器组件，但它似乎不起作用。我该如何解决这个问题。

在切换器组件中，我有以下代码

@Output() public onChange = new EventEmitter<StudentFileviewmodel>();
  public studentFilesOptions: SelectOption[] = [];
  public form: FormGroup;
  public selectedStudentFileId: number;
  public StudentFiles: StudentFileviewmodel[];
  public newStudentFiles: StudentFileviewmodel[];
  public selectedStudentFile: StudentFileviewmodel;


  private readonly predicates: (keyof StudentFileviewmodel)[] = ['name'];
  private destroy$ = new Subject<boolean>();

  constructor(private store: Store,private managementService: ManagementService,public changeDetectorReference: ChangeDetectorRef,) {}

  public ngOnDestroy(): void {
    this.destroy$.next(true);
    this.destroy$.complete();
  }

  public ngOnInit(): void {
     this.form = new FormGroup({
      studentFileCtlr: new FormControl(),});
    this.store
      .select(filesGetData)
      .pipe(takeuntil(this.destroy$))
      .subscribe(studentFiles => {
       this.studentFiles = this.getSortedStudentFiles(studenFiles);
       this.setStudentFilesSelectOptions();
       this.selectedStudentFile = 
       this.managementService.getIntialStudentFile(this.studentFiles);
       this.selectedStudentFileId = this.selectedStudentFile.id;
      this.updateSudentFile();
    })
 
      
}

  private setStudentFilesSelectOptions= (): void =>{
    this.studentFilesOptions = [];
    this.studentFiles.forEach(studentFile => {
      this.studentFilesOptions.push({ label: `${studentFile.name}`,value: studentFile.id });
    });
 }

  private getSortedStudentFiles= (studentFiles: StudentFileviewmodel[]): StudentFileviewmodel[] =>
  ArrayUtil.sortBy(studentFiles,this.predicates,[Order.Ascending]);


 public updateStudentFile(): void {
   
    this.form.get('studentFileCtlr').valueChanges.subscribe( value => {
      this.selectedStudentFile = value;
      this.selectedStudentFile = this.managementService.getSelectedStudentFile(value,this.studentFiles);
      this.selectedStudentFileId = this.selectedStudentFile.id;

      this.form.get("studentFileCtlr").patchValue(this.selectedStudentFile);
    
    });
     this.onChange.emit(this.selectedStudentFile);
  }

在服务管理Service.ts

   public getIntialStudentFile(studentFiles: StudentFileviewmodel[]): StudentFileviewmodel {
    return studentFileId ? studentFiles.find(studentFile => studentFile.id === studentFileId) : studentFiles[0];
  }

  public getSelectedStudentFile(studentFileId:number,studentFiles: StudentFileviewmodel[]): StudentFileviewmodel {
    return studentFileId ? studentFiles.find(studentFile => studentFile.id === studentFileId) : studentFiles[0];
  }

在切换器组件模板中

<form [formGroup]="form">
<div class="d-flex align-items-center">
 
  <select
    class="form-control studentfile-dropdown"
    (change)="updateStudentFile()"
    [items]="studentFilesOptions"
    [(ngModel)]="selectedStudentFileId"
    [searchable]="true"
    [clearable]="false"
    bindLabel="label"
    bindValue="value"
    formControlName="studentFileCtlr"
  ></select>
</div>
</form>