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

Posted 2023-03-13

【中文标题】Observable 类型上不存在 TS2339 属性 xxx 的问题

【英文标题】：Problem with TS2339 Property xxx does not exist on type Observable

【发布时间】：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
      
    );
  

【问题讨论】：

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

【参考方案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;
);