Angular 11 выбрано значение по умолчанию для mat-select, заполненное наблюдаемым

У меня есть модуль 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 и передаю эти два значения через параметры роутера. Перейдите кituazioneClienteComponent

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

  }

В СитуационКлиентеКомпонент я установил две числовые переменные @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 я могу передать эти переменные селектору ProgettiAzioniComponent через [selectedIdProgetto] и [selectedIdAzione]

      <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, но я не могу предварительно выбрать для них параметр выбора матов, даже если я установил [(значение)] из двух вариантов выбора матов, например [(значение)] = "selectedIdProgetto" и [(значение)] = "selectedIdAzione"

Кто-нибудь может мне помочь? заранее спасибо

Источник

2 ответа

У вас нет ответа (ИСПРАВЛЕНО НИЖЕ), но у вас возникла та же проблема с Observable<T[]>, и оперативная разница между рабочим примером и ответом, предоставленным пользователем6749601, заключается в использовании простого массива по сравнению с наблюдаемым. Обратите внимание на разницу между:

      <mat-option *ngFor="let title of titles" [value]="title">

и конвейерные асинхронные наблюдаемые в

      <mat-option *ngFor="let azione of azioni$ | async" [value]="azione.IDAzione">

привязка [(ngModel)] к выбору, похоже, не работает для модели для просмотра заданных асинхронных условий.

Исправление : Эта причина этой проблемы найдена! Ура! ... выбор использует идентификатор объекта, а не какую-то реализацию equals(). Если вы создаете экземпляр нового объекта и используете его в качестве модели для просмотра привязки. Тогда он (по идентификатору объекта) не обязательно будет «равным» значениям, поддерживающим список выбора. Следовательно, список выбора не будет выбирать инициализированное значение модели. Предоставьте функцию сравнения. Эта оригинальная угловая документация объясняет, ПОЧЕМУ ...

https://angular.io/api/forms/SelectControlValueAccessor#customizing-option-selection

Источник

Не используйте здесь значение, а ngModel

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

<mat-select [(ngModel)]="selectedIdAzione" ...
Источник
Другие вопросы по тегам