我将四个ngx-mat-search集成到我的组件中，正确地执行了所有功能并进行了研究。 但是在我进行研究并选择一个选项时，所选值将随初始表中索引为0的值而改变。
此集团包含我html中的所有ngx-select
<!-- Raison sociale porteuse -->
<div class="col-lg-4 col-md-6 col-sm-6 col-12 " *ngIf="labels.LIBAPPS0002">
<mat-form-field class="O_100">
<mat-label>{{labels.LIBAPPS0002}}</mat-label>
<mat-select #rso formControlName="idRS" required>
<ngx-mat-select-search [formControl]="raisonFilterCtrl" [placeholder]="labels.LIBOBS0050"
[noEntriesFoundLabel]="'Aucun élement à été trouvé'"></ngx-mat-select-search>
<mat-option *ngFor="let rsp of filteredRaisonSocOptions|async" [value]="rsp.idRaisonSoc">
{{rsp.nom}}
</mat-option>
</mat-select>
</mat-form-field>
<obs-field-error [control]="createForm.get('idRS')"></obs-field-error>
</div>
<!-- Metier -->
<mat-form-field class="O_100">
<mat-select #metier formControlName="idMetier" [placeholder]="labels.LIBAPPS0009" ngDefaultControl>
<ngx-mat-select-search [formControl]="metierFilterCtrl"
[noEntriesFoundLabel]="'Aucun élement à été trouvé'"></ngx-mat-select-search>
<mat-option (onSelectionChange)="nomMetier($event, option)"
*ngFor="let option of filteredMetOptions|async" [value]="option.idMetier">
{{option.valeur}}
</mat-option>
</mat-select>
</mat-form-field>
<!-- service gestionnaire du projet -->
<div class="col-lg-4 col-md-6 col-sm-6 col-12" *ngIf="labels.LIBAPPS0008">
<mat-form-field class="O_100">
<mat-select #servicegestionnaire formControlName="serviceGestionaire" [placeholder]="labels.LIBAPPS0008">
<ngx-mat-select-search [formControl]="gestionnaireFilterCtrl"
[noEntriesFoundLabel]="'Aucun élement à été trouvé'">
</ngx-mat-select-search>
<mat-option *ngFor="let sgp of filteredGestProjOptions | async" [value]="sgp.id">
{{sgp.nom}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<!-- Assistant à maitrise d'ouvrage -->
<div class="col-lg-4 col-md-6 col-sm-6 col-12" *ngIf="labels.LIBAPPS0050">
<mat-form-field class="O_100">
<mat-label>{{labels.LIBAPPS0014}}</mat-label>
<mat-select #asmo formControlName="idRSMO" required>
<ngx-mat-select-search [formControl]="raisonFilterCtrl" [placeholder]="labels.LIBOBS0050"
[noEntriesFoundLabel]="'Aucun élement à été trouvé'">
</ngx-mat-select-search>
<mat-option *ngFor="let rsp of filteredRaisonSocOptions|async" [value]="rsp.idRaisonSoc">
{{rsp.nom}}
</mat-option>
</mat-select>
</mat-form-field>
<obs-field-error [control]="createForm.get('idRSMO')"></obs-field-error>
</div>
</div>
中包含代码
/* ViewChild */
@ViewChild('RSO') rso: MatSelect;
@ViewChild('ASMO') asmo: MatSelect;
@ViewChild('metier') metier: MatSelect;
@ViewChild('servicegestionnaire') servicegestionnaire: MatSelect;
/** control for the MatSelect filter keyword */
protected raisonFilterCtrl: FormControl = new FormControl();
protected gestionnaireFilterCtrl: FormControl = new FormControl();
protected metierFilterCtrl: FormControl = new FormControl();
public filteredRaisonSocOptions: ReplaySubject<any[]> = new ReplaySubject<any[]>(1);
public filteredGestProjOptions: ReplaySubject<any[]> = new ReplaySubject<any[]>(1);
public filteredMetOptions: ReplaySubject<any[]> = new ReplaySubject<any[]>(1);
//function
getListMetiers() {
this.metierService.getListMetiers().pipe(takeUntil(this._unsubscribeAll)).subscribe(result => {
this.listMetier = result;
this.setInitialValueMet();
this.filteredMetOptions.next(this.listMetier.slice());
this.metierFilterCtrl.valueChanges
.pipe(takeUntil(this._unsubscribeAll))
.subscribe(() => {
this.filterMetier();
});
})
}
getListRaisonSocial(query?) {
this.projectService.getListRaisonSocial(query).pipe(takeUntil(this._unsubscribeAll)).subscribe(result => {
this.listRaisonSociale = result;
/* NGXSelect */
this.setInitialValue();
this.filteredRaisonSocOptions.next(this.listRaisonSociale.slice());
this.raisonFilterCtrl.valueChanges
.pipe(takeUntil(this._unsubscribeAll))
.subscribe(() => {
this.filterRSO();
});
})
}
getListGestionnaire(query?) {
this.projectService.getListgestionnaireProjet(query).pipe(takeUntil(this._unsubscribeAll)).subscribe(result => {
this.listGestionnaireProjet = result;
/* NGXSelect */
this.setInitialValueSGP();
this.filteredGestProjOptions.next(this.listGestionnaireProjet.slice());
this.gestionnaireFilterCtrl.valueChanges
.pipe(takeUntil(this._unsubscribeAll))
.subscribe(() => {
this._filterSGP();
});
})
}
/* ngx-select-option-RSO */
private filterRSO() {
if (!this.listRaisonSociale) {
return;
}
// get the search keyword
let search = this.raisonFilterCtrl.value;
if (!search) {
this.filteredRaisonSocOptions.next(this.listRaisonSociale.slice());
return;
} else {
search = search.toLowerCase();
}
this.filteredRaisonSocOptions.next(
this.listRaisonSociale.filter(raison => raison.nom.toLowerCase().indexOf(search) > -1)
);
}
/* ngx-select-option-SGP */
private _filterSGP() {
if (!this.listGestionnaireProjet) {
return;
}
// get the search keyword
let search = this.gestionnaireFilterCtrl.value;
if (!search) {
this.filteredGestProjOptions.next(this.listGestionnaireProjet.slice());
return;
} else {
search = search.toLowerCase();
}
this.filteredGestProjOptions.next(
this.listGestionnaireProjet.filter(sgp => sgp.nom.toLowerCase().indexOf(search) > -1)
);
}
/* ngx-select-option-met */
private filterMetier() {
//console.log(this.metierFilterCtrl.value);
if (!this.listMetier) {
return;
}
// get the search keyword
let search = this.metierFilterCtrl.value;
if (!search) {
this.filteredMetOptions.next(this.listMetier.slice());
return;
} else {
search = search.toLowerCase();
}
let metFilterResult = this.listMetier.filter(metier => metier.valeur.toLowerCase().indexOf(search) > -1);
this.filteredMetOptions.next(metFilterResult.slice());
}
/**
* Sets the initial value after the filteredBanks are loaded initially
*/
private setInitialValue() {
this.filteredRaisonSocOptions
.pipe(take(1), takeUntil(this._unsubscribeAll))
.subscribe(() => {
if (this.rso || this.asmo) {
this.rso.compareWith = (a: any, b: any) => a && b && a.idRaisonSoc === b.idRaisonSoc;
this.asmo.compareWith = (a: any, b: any) => a && b && a.idRaisonSoc === b.idRaisonSoc;
}
});
}
private setInitialValueMet() {
this.filteredMetOptions
.pipe(take(1), takeUntil(this._unsubscribeAll))
.subscribe(() => {
if (this.metier) {
this.metier.compareWith = (a: any, b: any) => a && b && a.idMetier === b.idMetier;
}
});
}
private setInitialValueSGP() {
this.filteredGestProjOptions
.pipe(take(1), takeUntil(this._unsubscribeAll))
.subscribe(() => {
if (this.servicegestionnaire) {
this.servicegestionnaire.compareWith = (a: any, b: any) => a && b && a.id === b.id;
}
});
}
我尝试了很多解决方案，但都没有用，只是我需要帮助