Observable 类型上不存在 TS2339 属性 xxx 的问题答案

【问题标题】：Problem with TS2339 Property xxx does not exist on type ObservableObservable 类型上不存在 TS2339 属性 xxx 的问题
【发布时间】：2020-04-22 11:37:10
【问题描述】：

似乎我的部分问题是加载内容的方式。当我在我的构造函数中调用 createForm 函数时，它会尝试访问 this.paswdProfile.numbers 和其他变量，这些变量是 ngOnInit 的一部分并且还没有用，所以它失败了。如果我将表单移动到 ngOnInit，它会抱怨没有 FormGroup 等。那么如何确保在 passwdProfile 有数据之后创建表单字段？

import {IBucket} from '../../../../models/bucket';
import { Component, OnInit, Inject, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { AdminService  } from '../../../../services/admin.service';
import { MAT_DIALOG_DATA,  MatDialog, MatDialogRef  } from '@angular/material';
import { Observable } from 'rxjs';
import { CouchbaseLookupService} from '../../../../services/couchbase-lookup.service';
import { takeWhile } from 'rxjs/operators';
import { ToasterService} from 'angular2-toaster';
import { CustomValidators } from './custom-validators';
import { IPasswordProfile } from '../../../../models/admin'



@Component({
  selector: 'app-password',
  templateUrl: './password.component.html',
  styleUrls: ['./password.component.scss']
})
export class PasswordComponent implements OnInit {
    public passwordForm: FormGroup;
    alive = true;

    paswdProfile$: Observable<IPasswordProfile>
    paswdProfile: IPasswordProfile

    constructor(@Inject(MAT_DIALOG_DATA) public data: any, private dialogRef: MatDialogRef<PasswordComponent>,
    private adminService: AdminService, private route: ActivatedRoute, private cbLookupService: CouchbaseLookupService,
    private router: Router, private dialog: MatDialog, private toasterService: ToasterService, private fb: FormBuilder) {
this.passwordForm = this.createPasswordForm()
     }



ngOnInit() {
    this.paswdProfile$ = this.adminService.getPasswordProfile("8084ea42-633e-4c28-bc7a-372aa58a4d1c")
    this.paswdProfile$.subscribe(res => {this.paswdProfile = res[0]})
    console.log(this.paswdProfile)
}

createPasswordForm(): FormGroup {
    return this.fb.group(
      {
        oldPassword : [ null, Validators.compose([Validators.required])],
        newPassword: [
          null,
          Validators.compose([
            Validators.required,
            // check whether the entered password has a number
            CustomValidators.patternValidator(/\d/g, this.paswdProfile.numbers , {
              hasNumber: true
            }),
            // check whether the entered password has upper case letter
            CustomValidators.patternValidator(/[A-Z]/g, this.paswdProfile.upperCase, {
              hasCapitalCase: true
            }),
            // check whether the entered password has a lower case letter
            CustomValidators.patternValidator(/[a-z]/g, this.paswdProfile.lowerCase,  {
              hasSmallCase: true
            }),
            // check whether the entered password has a special character
            CustomValidators.patternValidator(
              /[ !@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/g, this.paswdProfile.specialChar ,
              {
                hasSpecialCharacters: true
              }
            ),
            Validators.minLength(this.paswdProfile.minChar)
          ])
        ],
        confirmPassword: [null, Validators.compose([Validators.required])]
      },
      {
        // check whether our password and confirm password match
        validator: CustomValidators.passwordMatchValidator
      }
    );
  }


}

【问题讨论】：

这篇文章的浏览量是奇数。不像这是一个不寻常的问题。

标签： angular rxjs

【解决方案1】：

您没有获得对该对象的引用。你会得到对 Observable 的引用。您需要订阅 Observable 并存储结果。这是异步完成的。

this.adminService.getPasswordProfile("8084ea42-633e-4c28-bc7a-372aa58a4d1c")
    .subscribe(profile => this.paswdProfile$ = profile);

【讨论】：

这解决了一些问题，但由于我的表单是作为构造函数的一部分构建表单构建器，因此 this.passwordProfile 未初始化并会引发错误
在从 Observable 获取结果后，您只能在箭头函数中构建表单。
我最终做到了这一点，但还添加了一个标志，因此模板在创建表单并且我们有数据之前不会呈现

【解决方案2】：

如果您在模板中使用该值，则需要使用https://angular.io/api/common/AsyncPipe 来访问可观察值。

如果你想在 .ts 文件中访问它，你需要订阅它并等待它解析：

this.paswdProfile$.subscribe(profile => {
    const numbers = profile.numbers;
});

【讨论】：