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

这是我返回的服务

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