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>
Replies (6)
I have the same problem, I have already tried the ChangeDetectionStrategy configuration in default, in tscofig, angular.json and component. The problem persists.
Is there any update on this case?
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.
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 have the same problem, I have already tried the ChangeDetectionStrategy configuration in default, in tscofig, angular.json and component. The problem persists.
Is there any update on this case?
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>
