Angular 11 mat select的选定默认值填充了observable

我有一个模块ProgettiAzioniModule在两个组件SchedarioComponent和SituazioneClienteComponent之间共享。 本模块由两部分组成：

<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> 

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

@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我可以通过[selectedprogetto]和[selecteddazione]将这些变量传递给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>

{{idAnagrafica}}

我可以在ProgettiAzioniComponent中看到这些值，但是我不能用它们预选mat select选项，即使我将两个mat select的[（值）]设置为like [（值）]=“SelectedDrogetto”和[（值）]=“SelectedDazione”

有人能帮我吗？

---

提前感谢

此处不使用value，而使用ngModel

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

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

AppModule

---

谢谢你的回复。我已经使用了ngModel而不是value。但我也有同样的问题。嗯，那是个小问题。但我仔细检查了一下。它就是这样工作的。请找到我上面的例子。如果它仍然不适合您，我会说您的输入/输出不适合您。

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

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

<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>

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


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

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