Невозможно изменить значение длины отфильтрованных данных в angular4

Question

Я хочу изменить количество фильтрующих данных [т.е. [(ngModel)]="filterdata"] после того, как данные поступят в таблицы.Например:

Первоначально в текстовом поле я ввел «Experia», поэтому все данные из базы данных, в которой есть Experia, появились в таблице.,Количество данных отображается в правой части таблицы, как показано на рисунке => «Количество найденных данных = 6».Однако проблема заключается в том, что если я снова введу текст в поле поиска и фильтры данных, но этот номер отфильтрованных данных не отображается, например, «Количество искомых данных = 4», конечно, это число будет меньшемаксимальное число, т. е. = 6. Это остается тем же, что и >> «Количество найденных данных = 6», даже если общее количество отображаемых данных равно 4.

Я использовал (ngModelChange), потому что я думал, что это может работать, но это не так.

код:

Transactions.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>

action.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 у вас будет метод searchByText (значение), который вызывает конечную точку API и таблицу данных запроса, что-то вроде этого:

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.записи) с отфильтрованными данными!А в HTML вы можете просто выполнить интерполяцию строки {{this.records.length}}