Transitioning from Angular 1 to Angular 10 has led me to dive into learning typescript. Please bear with me if there are any errors as I navigate this new territory. While I have a substantial amount of code, here is the main issue at hand. In Angular 1, I was accustomed to using dot notation in my API responses. However, when attempting to do the same in Angular 10, an error emerges: Property 'CreditApplication' does not exist on type 'Object'.ts.
Despite encountering this error during the build process and within VS code, the code executes successfully and the data is correctly displayed in my HTML view without any console errors in the browser. The HTML view effectively accesses result.CreditApplication.PrimaryCustomer, even though the mentioned error persists.
this.api.getApplication(id).subscribe(result =>{
if(result){
this.primaryCustomer = result.CreditApplication.PrimaryCustomer;
this.financeOptions = result.CreditApplication.FinanceOptions;
}
})
To resolve this issue, I have crafted an interface where I import PrimaryCustomer and assign primaryCustomer accordingly:
export interface PrimaryCustomer {
SSN: string;
Id: number;
CustomerReferences?: Array<any>;
FirstName: string;
LastName: string;
Locale?: string;
OptOutStatus?: boolean;
IncomeSource: any;
}
In the component file, I declare:
primaryCustomer: PrimaryCustomer;
Here's a snippet from the working HTML view:
<strong>Bank Name:</strong> <span *ngIf="primaryCustomer && primaryCustomer.BankAccount">{{primaryCustomer.BankAccount.BankName}}</span>
I've explored solutions for similar errors on Stack Overflow, but haven't found an exact match for my particular case. It seems like I may need to typecast the result, but I'm uncertain. Any assistance would be greatly appreciated.