Angular中MatSelect选中值无法跨标签同步更新问题

我正在开发一款应用，支持用户为指定发行作品分配艺术家，也可为该发行内的歌曲分配艺术家，这两部分通过MatTab组件分隔。期望实现：当用户为父级发行作品选择艺术家后，添加歌曲的标签页中对应的MatSelect自动选中该艺术家，但尝试多种配置后均未成功。已确认子组件能收到根组件传递的艺术家值，但MatSelect的选中值未同步更新。

根发行表单 #

发行的艺术家表单位于“Details”标签下，传入根表单、API获取的艺术家Observable数组，以及事件处理方法。发行艺术家表单变更时触发事件更新Subject。单个歌曲的艺术家表单位于“Tracks & Artwork”标签下的app-track-subform组件中，传入当前选中艺术家的Subject。

HTML代码 #

<ng-container *ngIf="form">
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
        <mat-tab-group>
            <mat-tab label="Details">
                <app-title-subform [form]="form"></app-title-subform>
                <app-artist-subform [form]="form" [artists$]="artists$" (selectArtist)="selectReleaseArtist($event)"></app-artist-subform>
                <app-release-type-subform [form]="form"></app-release-type-subform>
            </mat-tab>
            <mat-tab label="Tracks & Artwork">
                <app-image-subform  [form]="artworkFormGroup"></app-image-subform>
                <app-track-subform [currentReleaseArtist]="releaseArtist" [form]="form" [artists$]="artists$" (addNewTrack)="addNewTrack($event)"></app-track-subform>
                <app-tracks-subform [tracks]="tracksFormArray"></app-tracks-subform>
            </mat-tab>
            <mat-tab label="Submission">
                <button type="submit" mat-raised-button color="secondary">Submit</button>
            </mat-tab>
        </mat-tab-group>
    </form>
</ng-container>

TypeScript代码 #

import { Component, OnInit, ViewChild, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormArray , FormBuilder } from '@angular/forms';
import { Observable, Subject } from 'rxjs';
import { BaseReleaseForm } from 'src/helpers';
import { IArtist } from 'src/models';
import { ApiService } from 'src/app/api.service';
import { ArtistSubformComponent } from '../subforms/shared/artist-subform/artist-subform.component';
import { TrackSubformComponent } from '../subforms/track-subform/track-subform.component';

@Component({
  selector: 'app-release-root-form',
  templateUrl: './release-root-form.component.html',
  styleUrls: ['./release-root-form.component.css']
})
export class ReleaseRootFormComponent implements OnInit {

  form: FormGroup;
  @Output() submitEmitter : EventEmitter<FormGroup> = new EventEmitter();
  artists$? : Observable<IArtist[]>;
  releaseArtist? : Subject<IArtist> = new Subject();

  constructor(private fb: FormBuilder, private api: ApiService) { 
    this.form = BaseReleaseForm(fb);
  }
  get tracksFormArray() : FormArray {
    return this.form.controls['tracks'] as FormArray;
  }
  get currentTrack() : FormGroup {
    const index = this.tracksFormArray.controls.length - 1;
    return this.tracksFormArray.controls[index] as FormGroup;
  }
  get artworkFormGroup() : FormGroup {
    return this.form?.controls['artwork'] as FormGroup;
  }
  get artistFormGroup() : FormGroup {
    return this.form?.controls['artist'] as FormGroup;
  }

  ngOnInit(): void {
    this.artists$ = this.api.getArtists();
  }

  selectReleaseArtist(artist: IArtist) {
    this.releaseArtist?.next(artist);
  }

  handleTrackChange(submitted : boolean) {
    if (!submitted) {
      const index = this.tracksFormArray.controls.indexOf(this.currentTrack);
      this.tracksFormArray.removeAt(index);
    }
  }

  addNewTrack(trackForm: FormGroup) {
    if (trackForm.invalid) {
      return;
    }
    this.tracksFormArray.push(trackForm);
  }

  onSubmit() : void {
    if (this.form.invalid) {
      return;
    }
    this.submitEmitter.emit(this.form);
  }
}

艺术家子表单 #

该子表单同时用于发行和添加歌曲场景，根组件的变更已传递到子组件，但MatSelect未同步。

TypeScript代码 #

import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { MatSelect } from '@angular/material/select';
import { Observable, Subject } from 'rxjs';
import { ApiService } from 'src/app/api.service';
import { IArtist } from 'src/models';

@Component({
  selector: 'app-artist-subform',
  templateUrl: './artist-subform.component.html',
  styleUrls: ['./artist-subform.component.css']
})
export class ArtistSubformComponent implements OnInit {

  @Input() currentReleaseArtist? : Subject<IArtist>;
  @Input() form? : FormGroup;
  @Input() artists$? : Observable<IArtist[]>;
  @Output() selectArtist : EventEmitter<IArtist> = new EventEmitter();
  releaseArtist?: IArtist;
  
  constructor(private api : ApiService) {
  }

  ngOnInit(): void {
  }

  ngAfterViewInit() : void {
    this.currentReleaseArtist?.subscribe(x => {
       this.releaseArtist = x;
       console.log(this.releaseArtist);
    });
  }
  
  onChange(artist : IArtist) {
    this.selectArtist.emit(artist);
  }
}

HTML代码 #

<ng-container *ngIf="form && artists$">
    <form [formGroup]="form">
        <mat-form-field>
            <mat-label>Artist</mat-label>
            <mat-select matInput formControlName="artist" [(ngModel)]="releaseArtist" (selectionChange)="onChange($event.value)">
                <mat-option *ngFor="let artist of artists$ | async" [value]="artist">
                    {{ artist.name }}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </form>
</ng-container>

表单组定义 #

export function BaseReleaseForm(fb: FormBuilder, release? : IRelease | undefined) : FormGroup {
    return fb.group({
        type: ['', Validators.required],
        title: ['', Validators.required],
        tracks: new FormArray([]),
        artist: new FormControl('', [Validators.required]),
        artwork: fb.group({
            file: [null, Validators.required]
        })
    })
}

export function BaseTrackForm(fb: FormBuilder) : FormGroup {
    return fb.group({
        type: ['', Validators.required],
        title: ['', Validators.required],
        file: [null, [Validators.required]],
        artist: new FormControl('', [Validators.required]),
        artwork: fb.group({
            file: [null, Validators.required]
        })
    })
}

问题排查与解决方案 #

核心问题分析 #

1. 表单控件与ngModel冲突：同时使用formControlName和[(ngModel)]，Angular响应式表单中这两种方式混用会导致数据同步异常，响应式表单应直接通过FormControl管理值。
2. 生命周期时机问题：ngAfterViewInit中订阅Subject时，表单控件可能未完全初始化，且仅更新了releaseArtist变量，未同步到FormControl。
3. 引用类型匹配问题：MatSelect选中值需要与选项对象引用完全一致，若传递过程中对象引用变化，会导致无法匹配选中。

修复步骤 #

1. 移除ngModel，改用响应式表单控制

修改艺术家子表单HTML，删除[(ngModel)]="releaseArtist"，仅保留formControlName="artist"：

<ng-container *ngIf="form && artists$">
    <form [formGroup]="form">
        <mat-form-field>
            <mat-label>Artist</mat-label>
            <mat-select formControlName="artist" (selectionChange)="onChange($event.value)">
                <mat-option *ngFor="let artist of artists$ | async" [value]="artist">
                    {{ artist.name }}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </form>
</ng-container>

2. 订阅Subject时直接更新FormControl值

将订阅逻辑移到ngOnInit，并直接更新表单控件的值：

ngOnInit(): void {
  this.currentReleaseArtist?.subscribe(x => {
     // 直接更新表单控件的值
     this.form?.get('artist')?.setValue(x);
  });
}

3. 确保对象引用一致（可选）

若存在对象引用不一致的情况，可改用艺术家唯一标识（如id）作为选项值，再通过id匹配对象：
修改子表单HTML：

<mat-option *ngFor="let artist of artists$ | async" [value]="artist.id">
    {{ artist.name }}
</mat-option>

修改子组件订阅逻辑：

import { map, switchMap } from 'rxjs/operators';

ngOnInit(): void {
  this.currentReleaseArtist?.pipe(
    switchMap(selectedArtist => {
      return this.artists$?.pipe(
        map(artists => artists.find(a => a.id === selectedArtist.id))
      ) || [];
    })
  ).subscribe(matchingArtist => {
    if (matchingArtist) {
      this.form?.get('artist')?.setValue(matchingArtist);
    }
  });
}

4. 检查TrackSubform的传递逻辑

确保app-track-subform组件正确将currentReleaseArtist传递给内部的app-artist-subform，中间组件需保证Input正确透传。

验证修复 #

完成修改后，选择发行的艺术家，切换到“Tracks & Artwork”标签，新增歌曲时对应的艺术家MatSelect应自动选中发行的艺术家。

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