问题描述
我有一个组件,我在其中订阅了一个 Customer 对象,这个客户有一个电话是字符串,但它可以是未定义的,因为在数据库中是空的,所以后端不会发送它。这就是为什么我需要在 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();
}
}
解决方法
问题:
this.customer.movilPhone
抛出错误,因为 this.customer
没有赋值。预期为 null
或 undefined
。
解决方案:
您需要确保为 this.customer
分配了值,然后只能访问 this.customer.movilPhone.
您可以使用 Typescript Optional Chaining 来实现。
if (this.customer?.movilPhone) {
telephones.push(this.customer.movilPhone);
}