无法读取 Object.eval [as 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" 中添加一个 null 检查，但这不起作用。

当我进入设置页面时，它一直显示相同的错误：

 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

因此，我没有使用 object，而是使用原始类型作为我的 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 中使用原始类型时，它可以工作