Невозможно прочитать свойство «пол» неопределенного в Object.eval [как updateDirectives]

Question

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

Вот код.

  userSettings: IUserSettings = {
    gender: null,
    drinks: null,
    smoking: null,
    ageRange: this.ageRange,
    distance: this.distance,
    notifications: true,
    dateOfBirth: null
  };


  ngOnInit() {
    console.log('settings', this.userSettings)
    this.afAuth.authState.subscribe(user => {
      this.getDataSvc.getUserFromFirebase(user.uid)
        .then((data) => {
          this.userSettings = data.data().userSettings;
        }).catch((error) => {
          console.log('errr', error);

        });
    });
  }

      <ion-button expand="block" color="success" style="margin-bottom: 20px;">
        <ion-icon size="large" name="transgender-outline" padding-left="20px"></ion-icon>
        <ion-select id="gender" name="gender" placeholder="Gender" required #genderField="ngModel"
          [(ngModel)]="userSettings.gender" [class.field-error]="form.submitted && genderField.invalid">
          <ion-select-option>Female</ion-select-option>
          <ion-select-option>Male</ion-select-option>
          <ion-select-option>Other</ion-select-option>
          <ion-select-option>No Preference</ion-select-option>
        </ion-select>
      </ion-button>
      <div [hidden]="genderField.valid || genderField.untouched" class="alert alert-danger">
        Must select an option
      </div>

Сначала я подумал, что могу просто добавить нулевую проверку в [(ngModel)] = "userSettings? .Gender", но это не работает.

Когда я захожу на страницу настроек, она просто продолжает отображать ту же ошибку:

ProfileSettingsPage.html:16 ERROR TypeError: Cannot read property 'gender' of undefined
    at Object.eval [as updateDirectives] (ProfileSettingsPage.html:17)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:45259)
    at checkAndUpdateView (core.js:44271)
    at callViewAction (core.js:44637)
    at execComponentViewsAction (core.js:44565)
    at checkAndUpdateView (core.js:44278)
    at callViewAction (core.js:44637)
    at execEmbeddedViewsAction (core.js:44594)
    at checkAndUpdateView (core.js:44272)
    at callViewAction (core.js:44637)

Answer 1

Ошибка, которую вы видите, заключается в том, что элементы DOM загружаются еще до того, как вы получите значение userSettings. Как упомянуто @robbieAreBest. Вам нужно обернуть родительский блок в проверку * ngIf для userSettings.

Ваш ion-select не знает, что такое userSettings при загрузке.

    <ion-button *ngIf="userSettings" expand="block" color="success" style="margin-bottom: 20px;">
            <ion-icon size="large" name="transgender-outline" padding-left="20px"></ion-icon>
            <ion-select id="gender" name="gender" placeholder="Gender" required #genderField="ngModel"
              [(ngModel)]="userSettings.gender" [class.field-error]="form.submitted && genderField.invalid">
              <ion-select-option>Female</ion-select-option>
              <ion-select-option>Male</ion-select-option>
              <ion-select-option>Other</ion-select-option>
              <ion-select-option>No Preference</ion-select-option>
            </ion-select>
          </ion-button>
<span *ngIf="!userSettings">Loading data...</span> // this is optional

Answer 2

Поэтому вместо использования объекта я использовал примитивные типы в качестве ngModel для решения этой проблемы.

 gender: string;
  drinks: string;
  smoking: string;
  notifications: boolean = true;

  userSettings: IUserSettings = {
    gender: null,
    drinks: null,
    smoking: null,
    ageRange: this.ageRange,
    distance: this.distance,
    notifications: true,
    dateOfBirth: null
  };

  validations_form: FormGroup;
  errorMessage: string = '';

  constructor(private router: Router,
    private dataSvc: DataService,
    private afAuth: AngularFireAuth,
    private getDataSvc: GetDataService,
  ) { }

  ngOnInit() {
    console.log('settings', this.userSettings)
    this.afAuth.authState.subscribe(user => {
      this.getDataSvc.getUserFromFirebase(user.uid)
        .then((data) => {
          this.gender = data.data().userSettings.gender,
            this.drinks = data.data().userSettings.drinks,
            this.ageRange = data.data().userSettings.ageRange,
            this.distance = data.data().userSettings.distance,
            this.notifications = data.data().userSettings.notifications
        }).catch((error) => {
          console.log('errr', error);
        });
    });
  }

  goToProfilePage() {
    this.router.navigateByUrl('tabs/profile');
  }

  savePersonalInfo(form) {
    console.log(form.valid);
    if (form.valid) {
      this.userSettings = {
        gender: form.value.gender,
        drinks: form.value.drinks,
        smoking: form.value.smoking,
        ageRange: this.ageRange,
        distance: this.distance,
        notifications: this.notifications,
        dateOfBirth: null
      };
      this.dataSvc.addUserSettings(this.userSettings).then(() => {
        this.goToProfilePage();
      }
      )
    }

    <ion-card >
      <ion-button  expand="block" color="success" style="margin-bottom: 20px;">
        <ion-icon size="large" name="transgender-outline" padding-left="20px"></ion-icon>
        <ion-select id="gender" name="gender" placeholder="Gender" required #genderField="ngModel"
          [(ngModel)]="gender" [class.field-error]="form.submitted && genderField.invalid">
          <ion-select-option>Female</ion-select-option>
          <ion-select-option>Male</ion-select-option>
          <ion-select-option>Other</ion-select-option>
          <ion-select-option>No Preference</ion-select-option>
        </ion-select>
      </ion-button >
      <div [hidden]="genderField.valid || genderField.untouched" class="alert alert-danger">
        Must select an option
      </div>

Работает, когда я использую примитивные типы в HTML ngModel