I have a problem, I am making a call to my API and it returns data.
I have implemented a component to show an error (it is called 404 but I will change it) and when I open my component 1 second before loading the data, the 404 page is seen.
How could I make the call wait until the call is completed?
Thank you
@if(salesData) {
<div class="flex flex-col space-y-4 max-w-md mx-auto bg-white shadow-md overflow-hidden md:max-w-6xl">
@for (i of pageRecords; track i.id) {
<div (click)="btnClick(i)" class="rounded-lg border-double border-2 border-sky-500 md:flex">
<div class="md:shrink-0">
<img
class="h-48 w-full object-cover md:h-full md:w-48"
src="{{ i.avatar }}"
/>
</div>
<div class="p-8 w-full">
<div
class="uppercase tracking-wide text-lg text-indigo-500 font-semibold"
>
{{ i.name }}
</div>
<a
class="block mt-1 text-sm leading-tight font-medium text-black hover:underline"
>{{ i.createdAt }}
</a>
<p class="mt-2 text-base text-slate-500">{{ i.description }}</p>
<div class="inline-flex items-baseline space-x-4 space-y-16">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
</svg> {{ i.bedrooms }}
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
</svg> {{ i.bathrooms }}
</div>
</div>
</div>
}
</div>
@if (totalPages > 0) {
<nav class="flex justify-center mt-5 mb-5" aria-label="Page navigation example">
<ul class="flex items-center -space-x-px h-10 text-base">
<li>
<a href="#" class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
<span class="sr-only">Previous</span>
<svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
</svg>
</a>
</li>
@for (x of numberOfPages; track x) {
<li>
<a (click)="goToPage(x)" id="{{ x }}" class="focus-visible:ring flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">{{ x }}</a>
</li>
}
<li>
<a class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
<span class="sr-only">Next</span>
<svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
</svg>
</a>
</li>
</ul>
</nav>
}
} @else {
<app-not-found />
}
getAds(n:string) {
if (n.includes("sales")) {
this.service.getAds().subscribe(response => {
this.salesData = response;
this.records = this.salesData.length;
this.pageRecords = this.salesData.slice(0, this.recordsPerPage);
this.totalPages = this.records / this.recordsPerPage;
for (let i = 1; i <= this.totalPages; i++) {
this.numberOfPages.push(i);
}
});
} else {
this.service.getRentsAds().subscribe(response => {
this.salesData = response;
this.records = this.salesData.length;
this.pageRecords = this.salesData.slice(0, this.recordsPerPage);
this.totalPages = this.records / this.recordsPerPage;
for (let i = 1; i <= this.totalPages; i++) {
this.numberOfPages.push(i);
}
});
}
}
getRentsAds() {
return this.http.get(`${this.apiUrl}/rents_ads`);
}
getAds() {
return this.http.get(`${this.apiNest}/ads`);
}
Oscar Plumariega is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
You should use “No content” caption (or specific component), rather than <app-not-found />
component in else condition. Maybe, you should use defer block, with <app-not-found />
in @error syntax block, for solve the problem.