未定义的验证不起作用-angular 11

Question

我有一个组件，我在其中订阅了一个客户对象，这个客户有一个字符串电话，但它可能是未定义的，因为在数据库中是空的，所以后端不会发送它。这就是为什么我需要在打印 html 中的数据之前进行验证。我尝试了为什么简单的 if(this.customer.movilPhone) 但我收到一条错误消息：无法读取未定义的属性 'movilPhone'。然后我尝试使用 if (this.customer.movilPhone !== 'undefined') 但我也遇到了同样的错误。我使用的第一个选项应该有效，为什么没有？提前致谢:)

我的代码是这个：

export interface CustomerModel {
   dateOfBirth?: string;
   country?: string;
   firstName?: string;
   lastName?: string;
   city?: string;
   movilPhone?: string;
   email?: string;
}

export class AppointmentComponent implements OnInit, OnDestroy {
   public destroyed = new Subject<any>();
   customer: CustomerModel;
   constructor(private readonly translate: TranslateService,
         private readonly sharingDataService: SharingDataService,
         private readonly router: Router,
         private readonly activatedRoute: ActivatedRoute,
         private readonly breakpointObserver: BreakpointObserver,
         private readonly  customerService: CustomerService) {
   }

   getCustomerData(): void{
       this.customerService.getCustomer().subscribe(data => this.customer = data);
       this.createArrayOfPhones();
   }

   isValid(telephone: string): boolean {
       return typeof telephone !== 'undefined';
   }

   createArrayOfPhones(): void {
       const telephones = {} as Array<string>;
       this.customer.mobilePhone;
       if (this.customer.movilPhone) { // Not Works
           telephones.push(this.customer.movilPhone);
       }
       console.log('Before');
       if (telephones) { // Works
           for (let i = 0; i < telephones.length; i++){
               console.log('Telephones ' + telephones[i]);
           }
       }
    }

   ngOnDestroy(): void {
       this.destroyed.next();
       this.destroyed.complete();
       this.destroyed.unsubscribe();
   }
}

Answer 1

问题：

this.customer.movilPhone 抛出错误，因为 this.customer 没有赋值。预期是 null 或 undefined。

解决方案：

你需要确保 this.customer 被赋值然后只访问 this.customer.movilPhone. 你可以用 Typescript Optional Chaining.

来实现

if (this.customer?.movilPhone) {
    telephones.push(this.customer.movilPhone);
}

未定义的验证不起作用-angular 11

Undefined validation does not work-angular 11

angular

typescript

validation

undefined-reference

angular11

问题：

解决方案：