Recently, I encountered an issue when trying to connect the PHP API with the Angular service to retrieve data from the database. I am uncertain whether the problem lies within the service, the component.ts file, or the HTML section. Therefore, I have shared my code here in hopes that you can assist me in resolving it.
The specific error I am facing is:
ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
Interestingly, I am able to see the data from the server when using a console.log() statement, but the data does not populate in the list.
carservice.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { retry, catchError } from 'rxjs/operators';
import { Car } from './car';
@Injectable({
providedIn: 'root'
})
export class CarService {
baseUrl = 'http://localhost/api/car';
httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
}
constructor(private http: HttpClient) { }
getAll(): Observable<Car[]> {
return this.http.get<Car[]>(this.baseUrl+'/read.php/')
.pipe(
retry(1),
catchError(this.handleError)
)
}
}
voiturecomponent.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Car } from 'app/car';
import { CarService } from 'app/car.service';
@Component({
selector: 'app-voiture',
templateUrl: './voiture.component.html',
styleUrls: ['./voiture.component.css']
})
export class VoitureComponent implements OnInit {
cars : Car[] = [] ;
constructor(private carService: CarService, private router:Router) { }
onBackButtonClick() : void {
this.router.navigate(['/ajout-car']) ;
}
ngOnInit(): void {
this.carService.getAll().subscribe((data: Car[])=>{
console.log(data);
this.cars = data ;
})
}
}
voiturecomponent.html
<div class="main-content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="col-md-12">
<div class="card-header">
<h4 class="title" ><strong> Liste Voiture </strong></h4>
</div></div>
<div class="card-body">
<span type="button"
class="btn btn-fill tn-secondary pull-right"
(click)=onBackButtonClick() >
<i class="fa fa-plus-square" aria-hidden="true"></i>
Ajouter Voiture
</span>
<div class="clearfix"></div>
</div>
<br>
<div id="theList">
<div class="container">
<div class="col-md-12">
<table class="table table-bordered " >
<thead>
<tr>
<th>Id</th>
<th>Série</th>
<th>Model</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let car of cars ">
<td>{{car.id}}</td>
<td>{{car.model}}</td>
<td>{{car.serie}}</td>
<td>
<button type="button" class="btn btn-info btn-fill btn-warning btn-sm btn-space">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-info btn-fill btn-danger btn-sm btn-space" >
<i class="fa fa-trash-o" aria-hidden="true"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Your assistance in resolving this issue is greatly appreciated.