I am attempting to display the ID and Document number that are retrieved from an array.
However, I am not seeing any results in return. You can view the application results here.
I have tried using string interpolation like {{document.id}} and {{document.documentNumber}}, with the interface setup as id: string and documentNumber: string. Below is my HTML code:
<div class="grid-container">
<div class="grid-item" *ngFor="let document of documents">
<div>Document ID: {{ document.id }}</div>
<div>Document Number: {{ document.documentNumber }}</div>
</div>
</div>
This is the GET method information:
public getDocuments(): Observable<Documents[]> {
let url = this.config.url;
if (!url.endsWith("/")) {
url += "/";
}
console.log("getDocument URL:", `${url}api/v1/document/`);
return this.http
.get<Documents[]>(`${url}api/v1/document/`, {
headers: {
authorization: this.config.authorization,
},
})
.pipe(
map((data) => {
console.log("getDocument:", data);
return data;
}),
catchError((error) => {
console.log("getDocuments Error:", error);
throw error;
})
);
}
Here is the component information:
export class DocumentListComponent implements OnInit {
public documents: Documents[] = [];
public constructor(private aService: AService) {
console.log("DocumentListComponent constructor", aService);
}
public ngOnInit(): void {
console.log("DocumentListComponent ngOnInit");
this.aService.getDocuments().subscribe((documents: Documents[]) => {
console.log("Received Documents:", documents);
this.documents = documents;
console.log("DocumentListComponent ngOnInit", this.documents);
});
}
}