javascript - angular5:ngFor 仅在第二个按钮单击时有效

Question

我的场景如下

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

2)数据通过ngFor以HTML形式呈现

问题在于第一次单击时，数据未以 HTML 形式呈现，但我正确获取了 HTTP 响应，并且仅在第二次单击时才呈现数据。

组件.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');
      }
    );
  }

}

Service.ts

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>

更新

点击绑定(bind)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>

Answer 1

根据Angular official tutorial ，如果将私有(private)属性绑定(bind)到模板，可能会遇到问题:

Angular only binds to public component properties.

也许，将属性 dealList 设置为 public 将解决该问题。