Блог

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

API возвращает список объектов, подобных этому

   [
     {
        personId: string,
        personName: string,
        personAge: int
      },
    ...
  ]
 

Я отображаю имя в раскрывающемся списке, но сохраняю идентификатор в форме

         <mat-form-field fxFlex.gt-sm="31%"  *ngIf="isPersonRequired()">
            <mat-label>
                Name
            </mat-label>
            <mat-select
                formControlName="personName"
                [required]="isPersonRequired()">

                <mat-option
                    *ngIf="(items | async)?.length==0"
                    disabled>

                    No item found
                </mat-option>
                <mat-option
                    *ngFor="let p of items | async"
                    [value]="p.personId">

                    {{p.personName}}
                </mat-option>
            </mat-select>
            <mat-error>
                Field Is Required
            </mat-error>
        </mat-form-field>
 

Как только имя выбрано и сохранено, как я могу отобразить его обратно, когда пользователь возвращается на эту страницу и раскрывается?

Спасибо

Если вы хотите сохранить данные при перезагрузке или обновлении, вы можете использовать localStorage для хранения данных в хранилище браузера до тех пор, пока они вам больше не понадобятся. Для достижения этой цели я бы рекомендовал вам создать общую службу для отслеживания всего выбора пользователя, а затем удалить ее, когда это будет сделано. Вот пример совместного обслуживания

 import { Injectable } from '@angular/core';

@Injectable()
export class SharingService {
  private storageName: string = "Settings";

  constructor() { }

  setSettings(data: any) {
    localStorage.setItem(this.storageName, JSON.stringify(data));
  }

  getUserSettings() {
    let data = localStorage.getItem(this.storageName);
    return JSON.parse(data);
  }

  clearUserSettings() {
    localStorage.removeItem(this.storageName);
  }

  cleanAll() {
    localStorage.clear()
  }

}