获取元素按 id 角度 7

Question

你好，我需要在 post 方法之后检索表单输入的值，所以我在服务级别插入了这段代码：

 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);
  }

在组件级别是这样的：

 getClient(form:NgForm){

  this.clientservice.getClient(form.value).subscribe(
    res =>{this.client = res as Client}
  )



 }

在 HTML 代码中：

<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>

我无法通过 ID 获取值我不知道是什么问题我既没有结果也没有错误消息

Answer 1

我认为您的 http 服务 (this.rootURL+'/Clients/GetClientByName/) 返回 Client[] 而不是 Client。 所以，你应该这样投射。

  this.clientservice.getClient(form.value).subscribe(
    res =>{this.client = res as Client[]}
  )

但是，你的反应是固定的

 {"Engagement":"56789","Clientname":"ClLIENT","ERP":"ERP"}

在组件级别，无需编辑

 getClient(form:NgForm){

  this.clientservice.getClient(form.value).subscribe(
    res =>{this.client = res as Client}
  )



 }

你应该编辑 html 文件。

<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>

---------------

---

或者需要使用ngFor循环，编辑组件级别。并且无需编辑组件级别。

 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)
      }
  )



 }