Question

我是Angular的新手。在2016年5月开始在Angular1中创建一个程序。由于Angular2已准备好摇滚，我认为移动到Angular2是理想的。我有这个“globalSearch”（它在我的附加代码中。出现在6个diff行中）函数来搜索/过滤Angular1中的表数据。我假设“管道”是它在Angular2中的等价物。我觉得在Angular2中完成它很容易。如果有人能指出任何示例代码，我将不胜感激。谢谢。

<body ng-controller="AppCtrl">
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" data-toggle="collapse" data-target="#myNavbar" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
    </div>
    <div id="myNavbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-left">
        <li><a href="/main" class="navbar-brand"><span class="glyphicon glyphicon-log-in"></span> Back to Prv Page</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="/" class="navbar-brand"><span class="glyphicon glyphicon-log-in"></span> Back to Home Page </a></li>
      </ul>
    </div>
  </div>
</nav>
<div class="container"></div>
<h1>.</h1>
<h1>My Listings
  <!-- add search form-->
  <form role="search" class="navbar-form navbar-right">
    <div class="input-group">
      <input type="text" placeholder="Search" ng-model="globalSearch.$" class="form-control"/><span class="input-group-btn">
        <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button></span>
    </div>
  </form>
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>FIELD1_HEADER</th>
        <th>FIELD2_HEADER</th>
        <th>FIELD3_HEADER</th>
        <th>FIELD4_HEADER</th> 
      </tr>
      <tr>
        <th>
          <input type="text" ng-model="globalSearch.FIELD1_DATA"/>
        </th>
        <th>
          <input type="text" ng-model="globalSearch.FIELD2_DATA"/>
        </th>
        <th>
          <input type="text" ng-model="globalSearch.FIELD3_DATA"/>
        </th>
        <th>
          <input type="text" ng-model="globalSearch.FIELD4_DATA"/>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="customer_rec in customers | filter:globalSearch">
        <td>{{customer_rec.FIELD1_DATA}}</td>
        <td>{{customer_rec.FIELD2_DATA}}</td>
        <td>{{customer_rec.FIELD3_DATA}}</td>
        <td>{{customer_rec.FIELD4_DATA}}  </td>
      </tr>
    </tbody>
  </table>
</h1>
</body>

Answer 1

为此您必须使用角度2管道以获取更多信息，请检查this

我为我的项目创建了一个

<强>管

import { Pipe, PipeTransform } from '@angular/core';
import * as moment from 'moment';

@Pipe(
    {
        name: 'filter',
        pure: false
    }
)


export class Filter implements PipeTransform {
    searchValue: string;
    transform(value: any, args: any) {
        if (args != null) {
            this.searchValue = args.text;
            //debugger;
            if (!this.searchValue) {
                return value;
            } else if (value) {

                return value.filter((item: any) => {

                    if ((args.type == 'string' || args.type == 'number')
                        && (this.getDescendantProp(item, args.key).toString().toLowerCase().indexOf(this.searchValue.toString().toLowerCase()) > -1)) {
                        return true;
                    }
                    if (args.type == 'date'
                        && (moment(this.getDescendantProp(item, args.key)).format(args.dateFormat.toUpperCase()).toLowerCase().indexOf(this.searchValue.toString().toLowerCase()) > -1)) {
                        return true;
                    }
                });
            }
        }
        else {
            return value;
        }
    }

    private getDescendantProp(o: any, s: any) {
        debugger;
        s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
        s = s.replace(/^\./, '');           // strip a leading dot
        var a = s.split('.');
        for (var i = 0, n = a.length; i < n; ++i) {
            var k = a[i];
            if (k in o) {
                o = o[k];
            } else {
                return;
            }
        }
        return o;
    }
}

在组件中，您必须导入并在管道列表中提供

import {Filter} from '../pipes/filter';
import {OrderBy} from '../pipes/orderBy';

declare var $: JQueryStatic;

//import {AuthGuard} from '../authguard/auth.guard'

@Component({
  selector: 'category',
  templateUrl: '../views/category.component.html',
  directives: [ROUTER_DIRECTIVES],
  providers: [SetupService, HTTP_PROVIDERS],
  pipes: [Filter, OrderBy]
})

此外，在组件中，您必须设置搜索对象的值，如下所示

  private search: any = {};
  ngOnInit() {
    ////debugger;
    console.log("in ngOnInit CategoryComponent");

    this.search.categoryName = { key: "categoryName", text: "", type: 'string' };
    this.search.createdOn = { key: "createdOn", text: "", type: 'date', dateFormat: 'dd-MMM-yyyy' };


  }

并在 View 中，你必须像这样写

<table class="table table-responsive table-hover">
    <thead>
        <tr>
            <th>Category Name</th>
            <th>Created On</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="text" [(ngModel)]="search.categoryName.text" palceholder="Search..." />
            </td>
            <td>
                <input type="text" [(ngModel)]="search.createdOn.text" palceholder="Search..." />
            </td>
            <td></td>
        </tr>
        <tr *ngFor="let cat of vm.categories | filter:search.categoryName |  filter:search.createdOn  ">
            <td style="vertical-align:middle">{{cat.categoryName}}</td>
            <td style="vertical-align:middle">{{cat.createdOn | date:search.createdOn.dateFormat }}</td>
            <td>
                <input type="button" class="btn btn-sm btn-primary" (click)="showdDetails(cat.categoryID)" value="Edit" />
                <input type="button" class="btn btn-sm btn-primary" (click)="delete(cat.categoryID)" value="Delete" />
            </td>
        </tr>
    </tbody>
</table>

Answer 2

嗨rashfmnb：最初我在浏览器控制台错误“http://localhost/.../traceur 404（未找到）”上卡住了很长时间。在阅读了一些相关的讨论后，我不得不删除“mypipe1.ts”文件中的注释行。不能相信“评论”线引起了这个问题。很奇怪。现在错误消失了。好。谢谢堆栈溢出用户。

最后，我终于可以让它继续工作了。尼斯。非常感谢@rashfmnb的帮助。看起来/工作得很好，除了我找不到在行级搜索ONCE的方法。相反，我必须为每列搜索一次TIME。我有大约13个小马。所以我必须如下。有没有办法我可以做一行搜索而不是13列搜索？这是我的“mypipe1.ts”。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'ppfilter',
    pure: false
})

export class Mypipeclass1 implements PipeTransform {
mypipeSearchValue: string;
transform(value: any, args: any) {
    console.log("value" + value + "     args..." + args);
    if (args != null) {
        this.mypipeSearchValue = args;
        if (!this.mypipeSearchValue) {
            return value;
        } else if (value) {
            return value.filter((item: any) => {
                if (((item.FLD01 != null) && ((item.FLD01).toString().toLowerCase().indexOf(this.mypipeSearchValue.toString().toLowerCase()) > -1))
                    || (((item.FLD02 != null) && (item.FLD02).toString().toLowerCase().indexOf(this.mypipeSearchValue.toString().toLowerCase()) > -1))
                    || (((item.FLD03 != null) && (item.FLD03).toString().toLowerCase().indexOf(this.mypipeSearchValue.toString().toLowerCase()) > -1))
                    || (((item.FLD04 != null) && (item.FLD04).toString().toLowerCase().indexOf(this.mypipeSearchValue.toString().toLowerCase()) > -1))
                    || (((item.FLD05 != null) && (item.FLD05).toString().toLowerCase().indexOf(this.mypipeSearchValue.toString().toLowerCase()) > -1))
                    || (((item.FLD06 != null) && (item.FLD06).toString().toLowerCase().indexOf(this.mypipeSearchValue.toString().toLowerCase()) > -1))
                    || (((item.FLD07 != null) && (item.FLD07).toString().toLowerCase().indexOf(this.mypipeSearchValue.toString().toLowerCase()) > -1))
                    || (((item.FLD08 != null) && (item.FLD08).toString().toLowerCase().indexOf(this.mypipeSearchValue.toString().toLowerCase()) > -1))
                    || (((item.FLD09 != null) && (item.FLD09).toString().toLowerCase().indexOf(this.mypipeSearchValue.toString().toLowerCase()) > -1))
                    || (((item.FLD10 != null) && (item.FLD10).toString().toLowerCase().indexOf(this.mypipeSearchValue.toString().toLowerCase()) > -1))
                    || (((item.FLD11 != null) && (item.FLD11).toString().toLowerCase().indexOf(this.mypipeSearchValue.toString().toLowerCase()) > -1))
                    || (((item.FLD12 != null) && (item.FLD12).toString().toLowerCase().indexOf(this.mypipeSearchValue.toString().toLowerCase()) > -1))
                    || (((item.FLD13 != null) && (item.FLD13).toString().toLowerCase().indexOf(this.mypipeSearchValue.toString().toLowerCase()) > -1))) {
                    return true;
                }
            });
        }
    }
    else {
        return value;
    }
}
}

globalSearch：Angular2示例代码

2 个答案: