(Angular 12)搜索按钮响应数据在点击按钮两次之前没有显示在模板中

Question

这是我的搜索输入框和按钮

  <div class="col-lg-8">
    <input #text class="form-control" placeholder="Search Customer" required/>
  </div>

  <button type="button" class="btn btn-info me-2" (click)="searchData(text)">Search</button>

这是我的组件代码，我在控制台中得到了值

   searchData(text:any){
     this.service.searchCustomer(text.value).subscribe(
       response =>{
         this.list = response;
         console.log(this.list); 
         this.cData = this.list.data.model;
        }
  );
}

这是我的服务 return

    searchCustomer(text:string){
      let body ={"searchText":text}
       return this.http.post(this.baseUrl+'/search-customer', body);
      }

Answer 1

它工作正常我在搜索数据中放入了这个函数的警报，我得到了我在那个函数中放入的警报

一键点击

你必须把你的构造函数

constructor(private changeRef: ChangeDetectorRef) {}

searchData(text:any){
 this.service.searchCustomer(text.value).subscribe(
   response =>{
     this.list = response;
     console.log(this.list); 
     this.cData = this.list.data.model;
     this.changeRef.detectChanges(); // this line detect changes
    })
;}

(Angular 12)搜索按钮响应数据在点击按钮两次之前没有显示在模板中

(Angular 12) Search button response data is not show in template before Click the button twice

angular2-services

angular

angular10

angular11

angular12