Question

我想更改过滤数据的计数[即数据到达表后的[(ngModel)]="filterdata"]。例如：

最初在文本框中，我输入了＃34; experia＆＃34;所以来自数据库的所有数据都出现在表中。并且数据的数量显示在表格的右侧，如图所示：＆gt; ＆＃34;搜索数据的数量= 6＆＃34;。但是，问题是，如果我在搜索文本框和数据过滤器中再次输入文本，但不会显示此过滤的数据，例如＆＃34;搜索数据的数量= 4＆＃34;当然这个数字将小于最大数量ie = 6.它与＆gt;＆gt;保持一致＆＃34;搜索数据的数量= 6＆＃34;即使显示的数据总数为4。

我使用了（ngModelChange），因为我认为它可能有效，但它没有。

代码：

transaction.component.html

  <input class="form-control" id="input1-group1" style="margin- 
   top:20px" type="text" name="search" placeholder="Enter Search Text"
              [(ngModel)]="filterdata"  (ngModelChange)= 
    "countFilter(filterdata)"(keyup.enter)="searchByText(filterdata)">

 //code

  <h2> Transaction  </h2>
  <label *ngIf="toShowCount" id="arrayCountId"> Number of searched 
  data  : {{arrayCount}}</label>

transaction.component.ts

  countFilter(filtData){

   console.log("inside countFilter = "+ filtData)
    this.countFilterData = filtData.length;

    if(this.arrayCount>=0){

   if(this.countFilterData<this.arrayCount){


    var result = [];
    var url = config.url;
    var port = config.port;

    this.http.post("http://" + url + ":" + port + 
   "/transaction/masterSearchTransactionForm/", this.filterObj
    , { headers: new Headers({ 'Authorization': 'Bearer ' + 
     localStorage.getItem('Token') }) })
    .map(result => this.result = result.json())
    .subscribe((res: Response) => {
    console.log("# DATE FILTER RESULT TRANSACTION  XXXXXXXXXXXX", 
     res);
     this.records = res;

     this.toShowCount =true;
      console.log ("the result of SearchByText is =  ", this.result)
     this.arrayCount = this.result.length;
     console.log("ArrayCount = " , this.arrayCount)
     console.log("search-by-text  records = ",res)

      console.log("Search by Text result is : " + result)
      if (this.result.length > 0) {

      this.notify.Success("Data Displayed Successfully");
      this.loading = false;

       }
       else {
        this.notify.Error("No Matching Data Available")

        this.loading = false;

       }
      });


     }
    }

Answer 1

你不需要（ngModelChange）=“countFilter（filterdata）”因为我可以看到你有2个调用REST端点来过滤数据的方法：一个在countFilter（filterdata）中，另一个在searchByText中（filterdata）。当您调用searchByText（filterdata）时，我假设您正在尝试过滤服务器上的数据并获得结果。从服务器获得结果时，将结果的长度放在变量中，就像在countFilter方法中那样。

 this.arrayCount = this.result.length;

将它放在searchByText方法中并删除countFilter，因为你不需要它。

编辑：

<input class="form-control" id="input1-group1" style="margin- 
   top:20px" type="text" name="search" placeholder="Enter Search Text"
   #searchControl (keyup.enter)="searchByText(searchControl.value)"
   (input)="countFilter($event.target.value)"       
>

在.ts文件中，您将拥有一个调用API端点和查询数据表的方法searchByText（value），如下所示：

searchByText(value) {
    this.http.post("http://" + url + ":" + port + 
    "/transaction/masterSearchTransactionForm/", this.filterObj
    , { headers: new Headers({ 'Authorization': 'Bearer ' + 
    localStorage.getItem('Token') }) })
    .map(result => this.result = result.json())
    .subscribe((res: Response) => {
        this.records = res;
}

现在，您已使用ENTER单击保存了第一次查询的所有数据在此之后，您希望拥有可以过滤此已保存数据的方法：

countFilter(value) {
    this.records = this.records.filter((record) => record.name == value);
}

现在你有一个带过滤数据的变量（this.records）！在html中你可以做字符串插值{{this.records.length}}

无法更改angular4

1 个答案: