我的情况如下
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可能会解决该问题。