在打字稿中赋值后未定义的值

Question

I'm trying to subscribe to a service in angular to get my customer's branding info through their Id.

Firstly, I load all customer data:

 this.subscription = this.burstService.getBurst().subscribe(async(response) => { if (response) { if (response.length > 0) { var survey = response[0]; this.storageService.set("customer", JSON.stringify(survey)); this.sessionJson.Id = survey.Id; this.sessionJson.Name = survey.Name; this.sessionJson.Email = survey.Email; this.sessionJson.SubDomainName = survey.SubDomainName; this.sessionJson.BusinessType = survey.BusinessType; this.sessionJson.Address = survey.Address; this.sessionJson.Phone = survey.Phone; this.sessionJson.Status = survey.Status; this.sessionJson.CreatedBy = survey.CreatedBy; this.sessionJson.CreationDate = survey.CreationDate; this.sessionJson.ModifiedBy = survey.ModifiedBy; this.sessionJson.ModificationDate = survey.ModificationDate; this.customerId = survey.Id; } } });

Then I try to subcribe to another api to get their branding data but the customer's Id seems undefined although when I assign its values in the getBurst bethod it equals to 1.

 this.burstService.getBranding(this.sessionJson.Id!).subscribe(async(response) => { if (response) { if (response.length > 0) { var customerBranding = response[0]; this.storageService.set("customerBranding", JSON.stringify(customerBranding)); } } });

Here are my observables in case its necessary:

 getBurst(): Observable < CustomerModel[] > { var url = `https://localhost:44397/api/Customer/` + splitUrl[1]; console.log(url); return this.httpClient.get < CustomerModel[] > (url, this.httpOptions); } getBranding(id: number): Observable < BrandingModel[] > { var url = `https://localhost:44397/api/Branding/` + id return this.httpClient.get < BrandingModel[] > (url, this.httpOptions); }

And lastly my class attributes:

 export class CategoryComponent implements OnInit { public survey ? : SurveyModel; private subscription: Subscription | undefined; private sessionJson: CustomerModel = {}; private customerId: any; constructor(private storageService: StorageService, private burstService: BurstService, private sessionService: SessionService, private ip: IpserviceService, private router: Router, private activateRoute: ActivatedRoute) {} ngOnInit(): void { this.loadData(); } ...

Answer 1

What's happening here is that the properties of the data model sessionJson are in PascalCase and they should be in camelCase . Check variable name casing types for more info.

For this project, the api is written in ASP.Net Core Web API, which uses C# as the programming language.

It is standard for C# to use PascalCase for naming variables, but once the api sends a response to the client, the JSON with the response info has properties in camelCase, which is the standard for JavaScript.

The model is undefined after the assignment because it is looking for a Pascal-cased property in the JSON, which doesn't exist, for example:

this.sessionJson.Email = survey.Email;

After storing the response object in survey, all its properties are in camelCase, so in reality if you want to access survey 's objet e-mail property you should do:

this.sessionJson.email = survey.email;

Notice that I also changes sessionJson 's email property. I also suggest naming all your property values in camelCase for consistency in JavaScript in this case, since that's the casing type the api is serving.