Невозможно установить значение обратно на angular. Выберите раскрывающийся список при загрузке страницы.

Question

Hello Angular Champs,

У меня есть выпадающее меню, я могу сохранить выбранное значение dorp down в хранилище сессии. При загрузке этот компонент не может выбрать это значение в раскрывающемся списке.

html код

<div>
  <div>
    <select id="customer_slct" #customerSelected>
      <option value="{{customer.customerId}}" *ngFor="let customer of customerList">{{customer.name}} 
      </option>
    </select>
  </div>
  <div>
    <button type="button" id="refreshCust" (click)="changeCustomer(customerSelected.value)">Refresh Customer<button>
  </div>
</div>

компонент ts file.

ngOnInit(){
this.selectedCustomer = sessionStorage.getItem("selectedCustomer");
$('#customerSelected').val(this.selectedCustomer);//This didnt work. 
//I need to selected customer number in the dropdown which was selected be4 page refresh.
}

changeCustomer(newCustomer:string){
  sessionStorage.setItem("selectedCustomer",newCustomer);
  window.location.reload();//I want to reload all componenets with new customer details.
}

Answer 1

<div>
  <div>
    <select id="customer_slct" #customerSelected [(ngModel)]="selectedCustomer">
      <option value="{{customer.customerId}}" *ngFor="let customer of customerList">{{customer.name}} 
      </option>
    </select>
  </div>
  <div>
    <button type="button" id="refreshCust" (click)="changeCustomer(customerSelected.value)">Refresh Customer<button>
  </div>
</div>

файл компонента ts.

ngOnInit(){
this.selectedCustomer = sessionStorage.getItem("selectedCustomer");
}

changeCustomer(newCustomer:string){
  sessionStorage.setItem("selectedCustomer",newCustomer);
  window.location.reload();//I want to reload all componenets with new customer details.
}

Answer 2

Как обсуждалось в комментариях, вы должны использовать двустороннее связывание данных для своего приложения, которое является идеальным решением.

Просто для того, чтобы сказать вам, проблема в вашем коде в том, что вы используете неправильный идентификатор для выбора элемент по идентификатору. Вам необходимо использовать эту строку:

$('#customer_slct').val(this.selectedCustomer);