如何在angular4中已经过滤后知道过滤数据的长度

时间:2018-05-17 11:58:16

标签: html angular

我有两个文本框功能。首先,它会在按下或按下搜索按钮时显示已过滤的数据,如果您在文本框中键入任何内容,则会进行第二次过滤,因此会过滤并显示过滤后的数据结果中的结果。

错误是 -

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

我理解错误,但是如何从已经过滤的数据中获取数字。我必须在.ts文件中执行某些操作。

它的代码是 -

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)

我在AngularJS中有类似问题的链接:

How to display length of filtered ng-repeat data

1 个答案:

答案 0 :(得分:0)

您正在将AngularAngular JS混合。我们在Angular中使用pipes而不是filter

为了显示已过滤数组result的结果,您只需要检查length属性。

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