Как получить значение по умолчанию в mat-select в Angular при переходе из другого компонента

У меня есть компонент с mat-select, как только я выбираю опцию и нажимаю кнопку рядом с выбранным значением, идеально перемещается к другому компоненту, но если я хочу вернуться, чтобы изменить свой выбор, тогда я бы хотел, чтобы на этот раз в коврике выберите старое значение как значение по умолчанию.

Используя службу обмена данными, у меня все еще есть доступное значение, но я все еще не могу вставить его в mat-select в качестве значения по умолчанию.

export class Themas {
    themaId?: string;
    name?: string;
    autorId?: number; 
}


export class ThemanComponent implements OnInit {
     constructor(private readonly translate: TranslateService,          
          private readonly sharingDataService: SharingDataService,
          private readonly router: Router) {
     } 

     selectedThema: Themas;

     ngOnInit(): void {
         this.onBackLoadSelectedThema();
     }

     onBackLoadSelectedThema(): void{
         console.log('load thema onback' + 
                      this.sharingDataService.data.name);
     if (this.sharingDataService.data){
         this.selectedThema.name= this.sharingDataService.data.name;
     }
  }

}



<div class="row">
    <div class="col-6">
        <form class="form-group">
            <mat-form-field appearance="fill">
                <mat-label>{{'choose.thema' | translate}}</mat-label>
                <mat-select [(ngModel)]="selectedThema" name="thema" required >
                    <mat-option *ngFor="let thema of settings.themas" [value]="thema">{{thema.name}}</mat-option>
                </mat-select>
           </mat-form-field>
        </form>
  </div>


export class MeetingComponent implements OnInit {
    themas = new Themas();
    id: string;
    constructor(private readonly translate: TranslateService,
            private readonly sharingDataService: SharingDataService,
            private readonly router: Router,
            private readonly activatedRoute: ActivatedRoute) {
     }
     ngOnInit(): void {
         this.themas = this.sharingDataService.data;
     }
}



<div class="row">
    <div class="col-8">
        <h2>{{'title' | translate}}<span>{{' ' + themas.name}}</span></h2>
    </div>
</div>

Пример:

введите здесь описание изображения


typescript angular html angular11 angular-material
person Perez Ch    schedule 31.05.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

selectedThema - это объект, и вы также используете этот объект как значение в раскрывающемся списке. Объекты сравниваются по ссылке, поэтому вам нужно фактически создать ссылку на объект в вашем массиве, а не просто указать имя. Вы можете использовать compareWith и не создавать ссылку, но здесь я просто ищу объект с таким же именем:

if (this.sharingDataService.data) {
   this.selectedThema = 
     this.settings.themas.find(thema => thema.name === this.sharingDataService.data.name)
}
person AJT82    schedule 31.05.2021
comment
Когда я так и поступаю, результат не определен, я вызываю метод onBackLoadSelectedThema () после запроса, таким образом, будут загружены this.settings. Здесь сообщения консоли: загрузить тему обратно: Advisoring SelectedThema: undefined - person Perez Ch; 14.06.2021