0

I have two functionalities of a text-box. First, it displays a filtered data on enter press or pressing on the search button and second filter happens if you type anything in the textbox and accordingly it filters and displays the result from the filtered data result.

Error is - 

Parser Error: Bindings cannot contain assignments at column 32 in 
[arrayCount1 of ctrl.filtered = (result| filter: query)]

I understood the error but how to get the number from already filtered data count.Do i have to do something in .ts file.

The code for it is -

transaction.component.html

   <td style="width:50%">
            <input class="form-control" id="input1-group1 " 
           style="margin-top:20px" type="text" name="search" 
           placeholder="Enter Search Text"
              [(ngModel)]="filterdata"  
        (keyup.enter)="searchByText(filterdata)">
          </td>
          <td style="width:50%">
            <button type="submit" class="input-group-addon" 
      style="margin-left:0px;width:65px;margin-top:20px" id="faIcon" 
            (click)="searchByText(filterdata)" >
              &nbsp;&nbsp;&nbsp;
              <i class="fa fa-search "></i>
            </button>
          </td>

   ....//code

   <div class="panel panel-default panel-transparent">
    <div class="panel-heading text-left">
    <h2> Transaction  </h2>
   <label *ngIf="toShowCount" id="arrayCountId"> Number of searched 
     data  : {{arrayCount}}</label>
    <ul>

    <li *ngFor = "arrayCount1 of ctrl.filtered = (result| filter: 
     query)"
   id="arrayCountId">Number of filtered search data : {{arrayCount1}} 
    </li>

    </ul>
     </div>
   </div>

transaction.component.ts

  this.http.post("http:...)
  .map(result => this.result = result.json())
  .subscribe((res: Response) => {

     this.records = res;

     this.toShowCount =true;

     this.arrayCount = this.result.length;

     console.log("ArrayCount = " , this.arrayCount)

I have a link to a similar question but in AngularJS :

How to display length of filtered ng-repeat data

  • `*ngFor` works over **arrays**, whilst you have a **number** in `arrayCount`. – Krypt1 May 17 '18 at 12:02
  • yeah ...correct ...then how do i calculate the sub-count of filter –  May 17 '18 at 12:06
  • Currently it's unclear where and how you filter the array. There's no `filter` pipe in the angular, and your html/ts snippets is not full. Please provide a [mcve], – Krypt1 May 17 '18 at 12:30
  • Ok ...i'll do that... i filter the result that i get from the database from an http request. It is this.arrayCount = this.result.length ... and filter pipe i use in "let arrayCount1 of arrayCount |filter:query as filtered" –  May 17 '18 at 12:32
  • can you use `let arrayCount1 of (arrayCount |filter:query)` – candidJ May 17 '18 at 12:51
  • @candid ....Cannot find a differ supporting object '6' of type 'number'. NgFor only supports binding to Iterables such as Arrays. –  May 17 '18 at 13:01
  • I still can't see where you do the filtration itself in the code. This expression doesn't really make sense: `*ngFor = "arrayCount1 of ctrl.filtered = (result| filter: query)"``. What is `ctrl.filtered` and `query` in your context? Also, as I noted before, there's **no** `filter' pipe in angular. To do something similar by your question, you would need to have a text box, filter the records on input, save resulting count in a variable and display that variable. – Krypt1 May 17 '18 at 13:09
  • Hey Krypt1 ... i have added the code that you where pointing at at the beginning of component.html page. –  May 18 '18 at 03:31

1 Answers1

0

You are mixing Angular with Angular JS. We use pipes instead of filter in Angular.

In order to display the result of filtered array result, you just need to check the length property.

<div class="panel panel-default panel-transparent">
    <div class="panel-heading text-left">
    <h2> Transaction  </h2>
   <label *ngIf="toShowCount" id="arrayCountId"> Number of searched 
     data  : {{arrayCount}}</label>
    <ul>

    <li *ngFor= "let count of (result| pipe: 
     'pipeName')"
   id="arrayCountId">

  Number of filtered search data :  <span [textContent]="(result| pipe:'pipeName').length"> </span>
    </li>

    </ul>
     </div>
   </div>
candidJ
  • 4,289
  • 1
  • 22
  • 32
  • Hi CandidJ, i am unable to figure out what to put in the pipeName. Because if i put the value of [(ngModel)]= "filterdata " like this -->
  • --> i get error --> The pipe 'pipe' could not be found -->
  • ]ount of (result| pipe:'filterdata')" id="arrayCountId">
    • –  May 18 '18 at 03:39
  • you need to create a custom `pipe` by the name of `filterdata`. please spend some time reading the official docs:https://angular.io/guide/pipes#custom-pipes – candidJ May 20 '18 at 07:42