GEt element By id angular 7 - html

Question

hello I need to retrieve the values entered by a form after the post method so I inserted at the service level this code :
list:Client[];
constructor(private http:HttpClient) { }
postClient(formData:Client){
return this.http.post(this.rootURL+'/Clients/',formData);
}
putClient(formData:Client){
return this.http.put(this.rootURL+'/Clients/'+formData.Engagement,formData);
}
getClient(formData:Client){
return this.http.get(this.rootURL+'/Clients/GetClientByName/'+formData.Engagement);
}
and at the component level like this :
getClient(form:NgForm){
this.clientservice.getClient(form.value).subscribe(
res =>{this.client = res as Client}
)
}
and in the HTML code this:
<table class="table table-hover">
<tr>
<th class="tname">Client</th>
<th class="tname">Enagement</th>
<th class="tname">ERP</th>
</tr>
<tr *ngFor="let clt of client">
<td >{{clt.Clientname}}</td>
<td >{{clt.Engagement}}</td>
<td >{{clt.ERP}}</td>
and I can’t get the values by ID with the get I don’t know what is the problem I have neither result or error message

Answer 1

I think your http service(this.rootURL+'/Clients/GetClientByName/) return Client[] not Client.
So, You should cast like this.
this.clientservice.getClient(form.value).subscribe(
res =>{this.client = res as Client[]}
)
But, your response is fixed
{"Engagement":"56789","Clientname":"ClLIENT","ERP":"ERP"}
at component level, no need to edit
getClient(form:NgForm){
this.clientservice.getClient(form.value).subscribe(
res =>{this.client = res as Client}
)
}
you should edit html file.
<table class="table table-hover">
<tr>
<th class="tname">Client</th>
<th class="tname">Enagement</th>
<th class="tname">ERP</th>
</tr>
<tr>
<td >{{client.Clientname}}</td>
<td >{{client.Engagement}}</td>
<td >{{client.ERP}}</td>
</tr>
---------------------------
or need to use ngFor loop, edit component level. and no need to edit component level.
client: Client[] = [];
getClient(form:NgForm){
this.clientservice.getClient(form.value).subscribe(
res =>{
const cli = res as Client;
this.client.length = 0;
Array.prototype.push.apply(this.client, cli)
}
)
}