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

如何解决未定义的验证不起作用-angular 11

我有一个组件，我在其中订阅了一个 Customer 对象，这个客户有一个电话是字符串，但它可以是未定义的，因为在数据库中是空的，所以后端不会发送它。这就是为什么我需要在 html 中打印数据之前进行验证。我尝试了为什么简单的 if(this.customer.movi​​lPhone) 但我收到一条错误消息：无法读取未定义的属性“movilPhone”。然后我尝试了 if (this.customer.movi​​lPhone !== '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();
   }
}

解决方法

问题：

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

---

解决方案：

您需要确保为 this.customer 分配了值，然后只能访问 this.customer.movilPhone. 您可以使用 Typescript Optional Chaining 来实现。

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