我的情况如下

1)当用户在文本字段中输入关键字并单击搜索图标时,它将发起HTTP请求以获取数据。

2)使用ngFor以HTML呈现数据

问题出在第一次单击时,数据没有以HTML呈现,但是我正确地获得了HTTP响应,而数据仅在第二次单击时呈现。

component.ts

export class CommerceComponent implements OnInit {


  private dealList = [];

  //trigger on search icon click
  startSearch(){

     //http service call
     this.getDeals();
  }

  getDeals(){

     this.gatewayService.searchDeals(this.searchParams).subscribe(
      (data:any)=>{
        this.dealList = data.result;
        console.log("Deal list",this.dealList);
      },
      (error)=>{
         console.log("Error getting deal list",error);
         this.dealList = [];
         alert('No deals found');
      }
    );
  }

}


服务

searchDeals(data){

   var fd = new FormData();
   fd.append('token',this.cookieService.get('token'));
   fd.append('search',data.keyword);

   return this.http.post(config.url+'hyperledger/queryByParams',fd);

}


的HTML

//this list render only on second click
<div class="deal1"  *ngFor="let deal of dealList">
     {{deal}}
 </div>


更新

单击绑定html代码

 <div class="search-input">
          <input type="text" [(ngModel)]="searchParams.keyword" class="search" placeholder="" autofocus>
          <div class="search-icon" (click)="startSearch()">
            <img src="assets/images/search.png">
          </div>
        </div>

最佳答案

根据Angular official tutorial,如果将私有属性绑定到模板,则可能会遇到问题:


  Angular仅绑定到公共组件属性。


将属性dealList设置为public可能会解决该问题。

09-11 00:50
查看更多