Angular: невозможно получить синхронизацию, кроме как после второго щелчка на радио с выбором мата

Question

Я подписан на мою предыдущую тему .

Моя проблема:

заключается в том, что нет синхронизации между выбранной мной клеветой профессии и отображаемой клеветой профессии .

Причина:

localStorage внутри метода radioChecked(id, i, pro) не работает для в первый раз . Это дает ПРАВИЛЬНЫЙ результат после второго клика .

Есть ли у вас какие-либо идеи по устранению этой ошибки?

Answer 1

Большое спасибо за вашу помощь. Но я хотел бы сказать вам, что я получаю this.selectedProfessionRadio как undefined, пока он внутри подписки. Итак, чтобы решить мою проблему, я пытаюсь добавить this.selectedProfessionRadio = pro.libelle вне подписки. ==> И так, я могу получить правильный результат без использования localStorage.

Answer 2

почему? Если вы перейдете в Chrome Developer Tools ... во вкладке приложения вы увидите 2 разных ключа

• ProfessionLibelle
• ProfessionLibe

После изучения кода при инициализации страницы ( ngOnInit )

1. вы читаете из службы
2. удаление существующего Предмета из локального хранилища
3. установка локального хранилища со значением, возвращаемым службой
4. Это означает, что по умолчанию значением всегда будет значение, которое возвращает служба ... не значение в локальном хранилище

После того, как вы нажмете переключатели (метод: radioChecked ), соответствующее значение будет установлено в локальном хранилище и отображено на экране.

Чтобы получить исправление для вашего конкретного вопроса : я удалил чтение значения из службы, и теперь мы читаем из localStorage в ngOnInit

релевантно TS :

import { Component } from '@angular/core';
import { FormGroup, NgForm, FormBuilder, Validators } from '@angular/forms';
import { Profession } from './profession.model';
import { UserService } from './user.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  selectedProfessionRadio = '';
  professionLib: string;
  editForm: FormGroup;
  usrId: String;

  professions: Profession[] =
    [
      { id: 1, libelle: "Engineer", selected: false },
      { id: 2, libelle: "Student", selected: false },
    ];

  radioChecked(id, i, pro) {
    this.professions.forEach(pro => {
      if (pro.id !== id) {
        pro.selected = false;
      }
      else {
        pro.selected = true;
      }
    })

    this.userService.getProfessionById(id).subscribe(data => {
      console.log(data);
      pro = data as Profession;

      localStorage.removeItem("ProfessionLibelle");
      localStorage.setItem("ProfessionLibelle", pro.libelle);
      this.selectedProfessionRadio = localStorage.getItem("ProfessionLibelle");
    }, error => console.log(error));

  }

  constructor(private formBuilder: FormBuilder, private userService: UserService) { }

  ngOnInit() {
    let userId = localStorage.getItem("editUserId");
    this.usrId = localStorage.getItem("editUserId");

    this.selectedProfessionRadio = localStorage.getItem("ProfessionLibelle");
    this.editForm = this.formBuilder.group
      ({
        id: [],
        name: ['', Validators.required],
        pro: [this.selectedProfessionRadio, Validators.required]
      });

    this.userService.getUserId(+userId).subscribe(data => {
      this.editForm.patchValue(data);
    });
  }

  onSubmit() { }
}

завершено рабочий стекблиц доступен здесь