Angular 11 选择了 mat-select 的默认值，填充了 observable

Question

我有一个模块 ProgettiAzioniModule 在两个组件 SchedarioComponent 和 SituazioneClienteComponent 之间共享。 该模块由两个 mat-select 组成：

<div class="progettiAzioniBody">
    <div>
        <h3 class="progettiAzioniTitle">
            {{ 'anms.progettiazioni.selezionaprogettoazione' | translate}}
        </h3>
    </div>
    <div fxLayout fxLayoutGap="10px" fxLayout.xs="column">
        <mat-form-field *ngIf="progetti$ | async" appearance="outline">
            <mat-select [(value)]="selectedIdProgetto" ngModel [formControl]="prjSearchCtrl" placeholder="{{ 'anms.progettiazioni.selezionaprogetto' | translate}}" name="progetto" required (selectionChange)="onProjectChange($event)" #singleSelect>
                <mat-option>
                    <ngx-mat-select-search [formControl]="prjSearchFilterCtrl" noEntriesFoundLabel="{{ 'anms.shared.nessunrisultato' | translate}}" placeholderLabel="{{ 'anms.shared.cerca' | translate}}"></ngx-mat-select-search>
                </mat-option>
                <mat-option *ngFor="let progetto of prjFilteredSearch | async" [value]="progetto.IDProgetto">                    
                    {{ progetto.NomeEsterno }}
                </mat-option>
            </mat-select>
        </mat-form-field>       
        <mat-form-field appearance="outline">
            <mat-select [(value)]="selectedIdAzione" ngModel placeholder="{{ 'anms.progettiazioni.selezionaazione' | translate}}" name="azione" required (selectionChange)="onActionChange($event)">
                <mat-option *ngFor="let azione of azioni$ | async" [value]="azione.IDAzione">
                    {{ azione.DescrizioneAzione }}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </div>
</div> 

在 SchedarioComponent 我从 mat-select 中选择项目和操作 我通过 router.navigate 的参数将这两个值传递到 SituazioneClienteComponent

situazioneCliente(anagrafica: AnagraficheSchedario) {
    const myurl = `/situazione-cliente/${anagrafica.IDAnagrafica}/${this.idProgetto}/${this.idAzione}`;
    this.router.navigateByUrl(myurl);

  }

在 SituazioneClienteComponent 中，我使用来自路由器参数的值设置了两个 @Output 数字变量：

@Output() selectedIdProgetto: number;
@Output() selectedIdAzione: number;

constructor(private store: Store,private actRoute: ActivatedRoute) {
    this.idAnagrafica = this.actRoute.snapshot.params.idAnagrafica;
    this.selectedIdProgetto = this.actRoute.snapshot.params.idProgetto;
    this.selectedIdAzione = this.actRoute.snapshot.params.idAzione;
  }

ProgettiAzioniComponent 在@Input 中接收这两个变量。 因此，从 SitazioneClienteComponent 我可以通过 [selectedIdProgetto] 和 [selectedIdAzione]

将这些变量传递给 ProgettiAzioniComponent 的选择器

<div class="situazioneClienteBody">

    <div fxLayout fxLayout.xs="column">
        <div class="infoAnag">
            {{idAnagrafica}}
        </div>
        <div class="azioniAnag">
            <div class="schedarioProgettiAzioni">
                <anms-progettiazioni [azioni$]="azioni$" [progetti$]="progetti$" [selectedIdProgetto]="selectedIdProgetto" [sele
    ctedIdAzione]="selectedIdAzione" (prgEvent)="progettoFromChild($event)" (actEvent)="azioneFromChild($event)">
                </anms-progettiazioni>
            </div>
        </div>
    </div>
</div>

我可以在 ProgettiAzioniComponent 中看到这些值，但我无法使用它们预先选择 mat-select 选项，即使我将两个 mat-select 的 [(value)] 设置为 [(value)]="selectedIdProgetto" 和 [(value)]="selectedIdAzione"

有人可以帮我吗？ 提前致谢

Answer 1

这里不要使用 value 而是使用 ngModel

<mat-select [(ngModel)]="selectedIdProgetto" ...

<mat-select [(ngModel)]="selectedIdAzione" ...

只是为了向您展示我的最小项目。

HTML

<div class="progettiAzioniBody">
  <div>
    <h3 class="progettiAzioniTitle">
      anms.progettiazioni.selezionaprogettoazione
    </h3>
  </div>
  <div>
    <mat-form-field appearance="outline">
      <mat-select [(ngModel)]="selectedIdProgetto" [formControl]="prjSearchCtrl"
                  placeholder="xyz"
                  required (selectionChange)="onProjectChange($event)"
                  #singleSelect>
        <mat-option value="Default">Default</mat-option>
        <mat-option *ngFor="let title of titles" [value]="title">
          {{ title }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>

  <input type="text" 
   placeholder="Enter a title"  
   [(ngModel)]="selectedIdProgetto">
</div>

TS

  titles = ['A', 'B', 'C', 'D'];
  selectedIdProgetto: any;
  prjSearchCtrl: FormControl = new FormControl();


  onProjectChange(selection: MatSelectChange) {
    this.selectedIdProgetto = selection.value;
  }

AppModule

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    FormsModule,
    BrowserModule,
    MatFormFieldModule,
    MatSelectModule,
    BrowserAnimationsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }