I have an angular 12 application and I have a service call which is returning an Object. I need to iterate through the object and display the values in the HTML. The problem is that I need to use strict typescript types. So "any" is not allowed. Here is my working code and this works fine if I declare files: any; But I need to use strict typescript types so "any" is not allowed.
SERVICE CALL:
public getUserUploadedFileName() {
return this.httpClient.get(this.url);
}
TS FILE:
files: any;
this._myService
.getUserUploadedFileName()
.subscribe((data) => {
this.files = data;
});
HTML :
<div *ngFor="let file of files">
{{ file }} </div>
You could get the values by:
this._myService
.getUserUploadedFileName()
.subscribe((data) => {
this.files = Object.values(data);
});
After imports section declare an interface fit your data properties:
//imports .....
export interface IResponseData {
property1:string;
property2:number;
property3:string;
}
files: Array<IResponseData>;
this._myService
.getUserUploadedFileName()
.subscribe((data:Array<IResponseData>) => {
this.files = data;
});