标签: angular-pipe

在角度1中我们有过滤器,这些过滤器可以在DOM和Typescript/Javascript中使用.在Angular 2中,我们使用管道来完成这些工作,但管道只能在DOM中使用.有没有其他方法可以在Typescipt(组件)中使用管道功能？如果有人知道这个,请帮忙.

例:

<div *for="let item of items">
    {{item.price | priceFilter }}
</div>

我创建了用户定义的管道,priceFilter但我想在Javascript/Typescript中进行相同的过滤.

我想<input type='text' placeholder=' {{ 'somestring' | getText }}'>使用管道动态设置占位符.(这种方法不起作用)

管道本身工作得很好,例如 <p>{{ myVariable | getText}}</p>将正确渲染,以及<p>{{ 'someString' | getText}}</p>

如何使用它来动态设置占位符字符串？

我time在应用程序中使用输入类型来接收时间：

  <mat-input-container>
<input matInput  formControlName="start_time" type="time" placeholder="Time Start">
<p class="invalid-text" *ngIf="dvrForm.controls.start_time.invalid &&
        (dvrForm.controls.start_time.dirty || dvrForm.controls.start_time.touched)">
  <span *ngIf="dvrForm.controls.start_time.errors.required"> Start Time is required.</span></p>

在我通过输入存储数据后，它以24小时格式存储：

因此，现在当我在视图中显示它时，它会以相同的格式显示，例如：23:11:00，是否可以在视图中显示时 使用类似管道的东西将其转换为12小时格式。

如何存储和使用来自变量的管道信息？

我已经搜索了很多，但找不到解决方案。

我想要实现的是将任何有效的管道信息作为变量（十进制、百分比、日期、自定义等）传递。遵循一个简单的例子：

parent.component.ts：

columnsDef = {
  value: 0.35,
  pipeInfo: 'percent:"0.2-2":"pt-BR"'
};

parent.component html：

<app-display-component [columnsDef]="columnsDef"></app-display-component>

app-display.component html：

<h1> {{ columnsDef.value | columnsDef.pipeInfo }}</h1>

预期的输出是格式化为百分比的值，但我得到的只是模板解析错误：

错误错误：未捕获（承诺）：错误：模板解析错误：解析器错误：意外标记“。”

<tr *ngFor="let a of arrayOfObjects">
    <td *ngFor="let item of cfValues | keyvalue">
        {{item.value}}
    </td>
</tr>

我只是想按常规顺序打印项目，但是键/值管道会根据索引进行默认排序。有没有办法禁用默认排序？

我有一个像 54781.7622000 、 1123.11 这样的值。我希望这个值的格式为 $54781.76 , $1123.11 。

//import currency pipe
import { CurrencyPipe } from '@angular/common'

//initialize  in constructor
constructor(private cp: CurrencyPipe)

this.formatedOutputValue = this.cp.transform(parseInt(this.outputValue));

我已经尝试过在这个值之后对额外的参数进行求和。

this.formatedOutputValue = this.cp.transform(parseInt(this.outputValue),1.2-2);

但是不锻炼。

我是角度新手。我想剪切长度超过 15 个字符的短字符串（例如），然后...在末尾添加。

例如：

姓名：坦泽尔,

角色：实习生

地址: 孟加拉...,

喜欢：C、CPP、...、

我正在使用p-chipsPrimeNg 来显示一些标签。我没有收到任何错误。实际上我什么也没得到，我的网页只是空白。甚至控制台日志也很干净。这是我的代码：

<p-chips [(ngModel)]="tokens">
  <ng-template let-item pTemplate="item">
    {{item | slice:0:15+'...'}}
  </ng-template>
</p-chips>

这是同样的stackblitz 。当我删除时，代码有效+...，但随后没有...看到连接（显然）。请指出我的错误。但是，在一个单独的分支中，我根据这个问题创建了自己的自定义管道：

如何在使用 Typescript 渲染时剪短长字符串

这是代码。

EllipsisPipe.component.ts

import { Pipe } from '@angular/core';
import { SlicePipe } from '@angular/common';

@Pipe({
  name: 'ellipsis'
})
export class EllipsisPipe extends SlicePipe {
  constructor () {
    super();
  }
  transform(value: string, maxLength: number): any {
    const suffix = value && value.length > maxLength ? …

我想将一个值传递给子组件。这个值是一个 Observable，所以我使用异步管道。

<child [test]="test$ | async"></child>

test$ 只是一个普通的可观察变量，它在一段时间（3000 毫秒）后发出值，模拟对服务器的 API 请求。

this.test$=timer(3000).pipe(
      mapTo("value")      
 )

在子组件中，我只想检查test值

@Input() test: any;

constructor(){
    console.log("child/test", this.test); //null
    setTimeout(()=>console.log("child/test (timeout)", this.test),4000) //value

   if(this.test){
     //maintain and check `this.test`
     //this code will not run, because at this point `this.test` is null.
     //we don't know the exact time that `this.test` will have a value
     //this causes that `this.test` is wrong

      this.checked=true 
     }
  }

<div *ngIf="checked">{{test}}</div>

我不想更改测试类型Observable并订阅它。我想直接接收最终值。我根本不想修改编辑组件。

使用ChangeDetectorRef手动触发变化检测器是不

@Input() test$:Observable

constructor(){
  this.test$.subscribe(v=>this.test=v)
}

我还做了这个 …

我使用“ng g pipe”命令创建了一个管道。在我的代码中使用它时出现控制台错误。下面附上代码的截图。错误：错误 NG8004：未找到名称为 'filterByPrcName' 的管道。 filter-by-prc-name.pipe.ts控制台错误信息 product-list.component.html

我想让html 上的1外观与.011111

如果有这样的过滤器，任何人都可以帮助我吗？这是示例演示代码