标签: angular-pipe

我在我的项目中使用@angular~4.0.0，我以表格形式显示数据并想添加搜索控件。

该代码有效（没有过滤器）

<tr *ngFor="let item of components">

但是当我为过滤器添加以下代码时，它会抛出错误

<tr *ngFor="let item of components | filter-data:compName">

错误 ：

Unhandled Promise rejection: Template parse errors:
TypeError: Unable to get property 'toUpperCase' of undefined or null reference ("
            </tr>
        </thead>
        <tr [ERROR ->]*ngFor="let item of components | filter-data:compName">
        <!--<tr *ngFor="let item of componen"): ng:///App/PortalComponents/ComponentList/component-list.component.html@14:12
Parser Error: Unexpected token -, expected identifier, keyword, or string at column 32 in [let item of components | filter-data:compName] in ng:///App/PortalComponents/ComponentList/component-list.component.html@14:12 ("nts | filter-data:compName">
        <!--<tr *ngFor="let item of …

我已成功在我的angularJs（1.x）应用程序中使用Numeral.js库将我的数字设置为不同格式。这就是我使用angular1过滤器的方式：

filter.js

.filter('numeral', function () {
  return function (count) {
    var numericalFormat = numeral(count).format('0.0a');
    return numericalFormat;
  };
})

为此，我遵循了Numeral.js的官方文档， 并使用npm进行了安装。我也引用index.html中的nodemodules。

在浏览器中

<script src="node_modules/numeral/numeral.min.js"></script>

但它显示

错误ReferenceError：在NumeralFilter.transform中未定义数字

最初，我尝试使用CDN参考，它可以在浏览器中正常工作。但是，当我在真实设备上安装该应用程序时，出现错误“数字未定义”。

管

import {Pipe,PipeTransform,Injectable} from "@angular/core"
@Pipe({
name:'numeralPipe'
})
@Injectable()
export class NumeralPipe implements PipeTransform{
    transform(count:any):any{ //eg: in count has value something like 52456.0
       var numericalFormat = numeral(count).format('0.0a');//error here
    return numericalFormat; // i have to format it like 52,5k
  }; 
} 

是否有任何用于格式化和处理数字的类型脚本库，或者在angular2中有任何方法可以做到这一点？

我正在使用一个组件来像数据一样呈现表格，我给它列的列表、数据、数据如何映射到每列，最后是一个应用于每列数据的管道列表。

到目前为止一切顺利，唯一的问题是当这些管道之一是异步管道时......

经过一段时间的试验，我发现在模板上使用 asyncpipe 时，transform 方法会被多次调用。但是，如果我以编程方式使用它，转换方法只会被调用一次（我调用它的时间）。

我猜它在模板上被多次调用的原因是因为它是一个不纯的管道，但我该如何以编程方式处理它？

这是一个plunker展示了我刚才所说的内容：

@Injectable()
export class AsyncProvider {
  constructor() {}
  
  getById(id: number) {
    // Just some mock data
    return Observable.of({id, times_five: id*5}).delay(1000);
  }
}

@Component({
  selector: 'my-app',
  providers: [AsyncPipe, AsyncProvider]
  template: `
    <div>
      <p>Template async pipe</p>
      <p>{{ asyncObj | async | json }}</p>
      <hr>
      <p>Programmatically async pipe</p>
      <p>{{ asyncObjPiped | json }}</p>
    </div>
  `,
  directives: []
})
export class App {
  constructor(
    private _provider: AsyncProvider,
    private _async: AsyncPipe
  ) {
    this.asyncObj = this._provider.getById(123); …

我想要发生的是为管道提供一个值，并让管道将其转换为列表。这可能不是最好的方法，但这是我想到的第一件事。

基本上我有一个简单的表。我有我的模板

<tr *ngFor="let res of results">
    <td>{{res.value1}}</td>
    <td>{{res.value2 | list}}</td>
</tr>

我的list烟斗就是这样。

从'@angular/core'导入{管道，管道转换}；

@Pipe({
    name: 'list'
})
export class ListPipe implements PipeTransform {
    transform(value: string, args?: any): any {
        let newList: string[];
        newList = value.split(',');
        let output = '<ul>';
        newList.forEach(val => {
            output += `<li>${val}</li>`;
        });
        output += '</ul>';
        return output;
    }
}

我的预期结果是这样的

<tr>
    <td>value 1</td>
    <td>
        <ul><li>value2.a</li><li>value2.b</li></ul>
    </td>
</tr>

但是发生的事情是<ul><li>value2.a</li><li>value2.b</li></ul>在我的页面中呈现文字值。

我究竟做错了什么？

所以我正在尝试构建一个自定义管道来对ngFor循环中的多个值进行搜索过滤.我已经花了好几个小时才找到一个好的工作示例,其中大多数是基于以前的版本,似乎没有用.所以我正在构建Pipe并使用控制台为我提供值.但是,我似乎无法显示输入文本.

以下是我以前寻找工作示例的地方:

角4管过滤器

http://jilles.me/ng-filter-in-angular2-pipes/

https://mytechnetknowhows.wordpress.com/2017/02/18/angular-2-pipes-passing-multiple-filters-to-pipes/

https://plnkr.co/edit/vRvnNUULmBpkbLUYk4uw?p=preview

https://www.youtube.com/results?search_query=filter+search+angular+2

https://www.youtube.com/watch?v=UgMhQpkjCFg

这是我目前的代码:

component.html

<input type="text" class="form-control" placeholder="Search" ngModel="query" id="listSearch" #LockFilter>

      <div class="panel panel-default col-xs-12 col-sm-11" *ngFor="let lock of locked | LockFilter: query">
        <input type="checkbox" ngModel="lock.checked" (change)="openModal($event, lock)" class="check" id="{{lock.ID}}">
        <label for="{{lock.ID}}" class="check-label"></label>
        <h3 class="card-text name" ngModel="lock.name">{{lock.User}}</h3>
        <h3 class="card-text auth" ngModel="lock.auth">{{lock.AuthID}}</h3>
        <h3 class="card-text form" ngModel="lock.form">{{lock.FormName}}</h3>
        <h3 class="card-text win" ngModel="lock.win">{{lock.WinHandle}}</h3>
      </div>

pipe.ts

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

@Pipe({
  name: 'LockFilter'
})

export class LockFilterPipe implements PipeTransform {
  transform(locked: any, query: string): any { …

在Angular 5.1中使用DatePipe,我需要以小写形式格式化句点字段类型(AM/PM).根据文件,

Tuesday, December 19, 7:00 am 

应该

date:'EEEE, MMMM d, h:mm a'

但是,句点字段类型始终以大写形式显示,所以我看到:

Tuesday, December 19, 7:00 AM

我做错了什么,或者这是Angular日期格式化的已知缺陷？

我不想使用“ |异步管道”，因为我不想获取每个组件的数据。我的转换功能如下：

 transform(key: string, ...args) {
  this.storage.get("dictionary").then((dict) => {         
   var translated = dict[key] || "noResource";
   console.log("key = "+key + ", value = "+translated);
   return translated; 
  });  
}

我可以获取键和值，但无法显示值。我尝试了ngZone但没有工作。

我在 Angular 5 中有一个非常简单的管道

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

@Pipe({
    name: "default"
})
@Injectable()
export class DefaultPipe {
    transform(value: string, fallback: string): string {
        let image = "";
        if (value) {
            image = value;
        } else {
            image = fallback;
        }
        return image;
    }
}

我以非常简单的方式使用它只是为了演示

<div>
    {{ 'somthing' | default }}
</div> 

我还在 app.module.ts 的提供者部分中添加了

@NgModule({
    declarations: [
        AppComponent,
        DefaultPipe // <-- Here
    ],
    imports: [
        ....
    ],
    providers: [
        ....
    ],
    bootstrap: [AppComponent]
})
export class …

我对变更检测和管道有疑问。我找不到解决这个问题的好方法。

我创建了一个小项目来在这里重现它。转到 /monitor 路线。

当您单击“更改”按钮时，它会更改数组中第一项的值，但 UI 不会更新。

如果我在更改处理程序中重新创建另一个对象，它会起作用

this.state[0] = Object.assign({}, this.state[0], { value: 999.99 });

但我不想那样做。我需要保留相同的对象引用。

问题来自于vital-value.component.html中的管道

{{ _vitalValue | vitalFormat }}

如果我使用它，它会起作用

{{ _vitalValue.value }}

有没有办法保留管道但使刷新发生？

谢谢！

我有一个要求，我必须使用ts的十进制管道来转换数字

而不是像这样使用十进制管道

<td>{{rmanFmvRulesDef.max  | number :'1.2-2'}}</td>

我想从组件中操作它，有人可以帮助我吗？