时间戳

首页 > 解决方案 > 在angular4中已经过滤后如何知道过滤数据的长度

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

问题描述

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

错误是 -

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

如何显示过滤后的 ng-repeat 数据的长度

标签： htmlangular

解决方案

您正在Angular与Angular 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>

推荐阅读