Problems with data binding in Angular

I was testing the template: Im getting data with an observable from a rest api, then in my component created a subscribe function, but when I try to fill my table with the requested data, it doesn't on first load, then when I click again in the menu then it fill corretly. And dont makes mi sense cause I was testing this procces on a fresh angular 13 instance and works corretly.

Client Service:

getClients(): Observable<Cliente[]> {
//return of(CLIENTES);
return this.http.get<Cliente[]>(this.urlEndpoint+'/clientes')
}

Component:

ngOnInit(): void {
this.clienteService.getClients().subscribe(clients => this.clients = clients);
}

template
<tr *ngFor="let colonia of colonias">
<td>{{ colonia.id }}</td>
<td>{{ colonia.nombre }}</td>
<td>{{ colonia.cp }}</td>
<td>
<button type="button" class="btn btn-secondary btn-sm btn-relief-secondary"><i data-feather="edit"></i>Editar</button>
<button type="button" class="btn btn-danger btn-sm btn-relief-secondary"><i data-feather="delete"></i>Eliminar</button>
</td>
</tr>

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)

Sorry, the html template is:

<tr *ngFor="let client of clients">
<td>{{ client.id }}</td>
<td>{{ client.nombre }}</td>
<td>{{ client.apellido }}</td>
<td>{{ client.email }}</td>
<td>{{ client.createdAt }}</td>
<td>
<button type="button" name="editar" class="btn btn-secondary" [routerLink]="['/clientes/form', client.id]">Editar</button>
<button type="button" name="editar" class="btn btn-danger" (click)="delete(client)">Eliminar</button>
</td>
</tr>

Hi,

Try to check this article https://www.digitalocean.com/community/tutorials/angular-change-detection-strategy.
You have to notify angular about detecting the changes after getting a response from a server.

Regards,
Keenthemes support

I've exacly your same problem.... have you resolved with the link provided? btw it seems quite strange to me, I've never set those in other (non metronic) angular project

Could it possibly be because your nonmetronic angular project has ChangeDetectionStrategy set to Default?
If you look at Metronic's app.component.ts, you can see that they set the changeDetection to ChangeDetectionStrategy.OnPush.

In OP's case, you can either explicitly tell changedetector that there is a change, or just use async pipe:

Component:

clients$: Observable<Cliente[]>;
ngOnInit(): void {
this.clients$ = this.clienteService.getClients();
}

template:

<tr *ngFor="let client of clients$ | async">
<td>{{ client.id }}</td>
<td>{{ client.nombre }}</td>
<td>{{ client.apellido }}</td>
<td>{{ client.email }}</td>
<td>{{ client.createdAt }}</td>
<td>
<button type="button" name="editar" class="btn btn-secondary" [routerLink]="['/clientes/form', client.id]">Editar</button>
<button type="button" name="editar" class="btn btn-danger" (click)="delete(client)">Eliminar</button>
</td>
</tr>


Note that the above code isn't tested, but you get the point.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(