I have been working on retrieving data from an ASP .NET Core API and then displaying it on an HTML page using Angular and TypeScript. The communication between the client and server is functioning properly, with the response being in the form of an object. I have created a model class to extract the values from this response.
However, I am encountering an issue when trying to display these values as they all appear to be undefined. It seems like the problem lies within the Promise implementation.
Here is a snippet of the response received from the server:
Id: 1
Name: "asd"
Description: "asd"
Syntax: "Typescript"
IdentityString: "karma"
LastModified: "2020-01-05T00:51:00"
Content: "asd"
FileId: 1
File: null
Below is the relevant code:
fileshare.ts
export class FileShareComponent implements OnInit {
constructor(
private route: ActivatedRoute,
private service: UserService,
private http: HttpClient
) {}
ngOnInit() {
const file: string = this.route.snapshot.queryParamMap.get('file');
this.http.get(this.service.BaseURL + '/Share?IdentityString=' + file)
.toPromise()
.then(res => this.service.sharedFormData = res as ShareModel);
console.log(this.service.sharedFormData);
}
}
ShareModel.ts
export class ShareModel {
Id:number;
Name: string;
Description: string;
Syntax: string;
IdentityString:string;
LastModified: string;
Content: string;
FileId: number;
}
service.ts
sharedFormData:ShareModel;
fileshare.html
<pre><code class="hljs">Name:
{{service.sharedFormData.Name}}</code></pre>
<pre><code class="hljs">Description:
{{service.sharedFormData.Description}}</code></pre>
<pre><code class="hljs">Syntax:
{{service.sharedFormData.Syntax}}</code></pre>
<pre><code class="hljs">LastModified:
{{service.sharedFormData.LastModified | date: "HH:mm dd/MM/yyyy"}}</code></pre>
<pre><code class="hljs">Content:
{{service.sharedFormData.Content}}</code></pre>