标签: angular-pipe

我想实现数字格式，如果数字是整数，则不应有小数占位符.00，否则使用 2 位且仅使用 2 位小数。例如：

1.23    -> 1.23
1.23456 -> 1.24
1.2     -> 1.20
1.0     -> 1
1       -> 1

根据文档，您只能指定小数位范围（例如|number:'.0-2'），而不能指定具体选择（例如|number:'.0,2'）；我是对的还是有办法？

我知道我可以通过一些*ngIf-s 实现相同的目标，但希望尽可能避免。

我想访问正在使用管道的当前元素。在 Angular 中可以吗？

管道的使用如下，例如<input type="text" value="'my-translation-key' | translate" />

这是实际管道的示例

@Pipe({
  name: 'translate',
  pure: false
})
export class TranslatePipe implements PipeTransform {
  transform(key: string, params?: ITranslationSelector): string {
      // 1. Get the value by key
      // 2. Return the value

      // What I want as well:
      // this.el.nativeElement.dataset.translationKey = key;
      // Where el is current element where pipe is used
  }
}

我正在尝试使用 Angularcurrency管道，我想从格式化的数字中一起删除货币符号，但似乎没有选择这样做。那么有没有什么简单的方法可以在不为其编写自定义管道的情况下实现这一目标？

我正在尝试创建帖子共享网站。我想以角度创建日期前管道。

    import {Pipe, PipeTransform} from 'angular2/core';

@Pipe({
  name: 'messageTime',
  pure: false
})
export class MessageTimePipe implements PipeTransform {
  transform(value: Date, []): string {
    var result: string;

    // current time
    let now = new Date().getTime();

    // time since message was sent in seconds
    let delta = (now - value.getTime()) / 1000;

    // format string
    if (delta < 10) {
      result = 'jetzt';
    } else if (delta < 60) { // sent in last minute
      result = 'vor ' + Math.floor(delta) + …

我一直在尝试遵循有角度的路线，并在使用 ngform 时遇到以下错误：

core.js:6237 错误 TypeError: 将循环结构转换为 JSON --> 从构造函数“TView”的对象开始 | 属性 'blueprint' -> 具有构造函数 'LViewBlueprint' 的对象 --- 索引 1 闭合圆

以下是模板 html：

    <div class="container">
      <h2>User Settings</h2>
      <form #form="ngForm">
        <div class="form-group">
          <label for="name">Name</label>
          <input id="name" name="name" class="form-control" placeholder="Name" />
        </div>
        <div class="form-check form-group">
          <input class="form-check-input" type="checkbox" value="" id="emailOffers">
          <label class="form-check-label" for="emailOffers">
                Email Special Offers
                </label>
        </div>
        <h5>User Interface Style</h5>
        <div class="form-group">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="InterfaceStyle" id="lightInterface" value="Light" checked>
            <label class="form-check-label" for="lightInterface">
                    Light
                    </label>
          </div>
          <div class="form-check">
            <input class="form-check-input" …

我在 stackoverflow 上其他人的答案的帮助下创建了一个自定义管道。如果article.title大于 55 个字符，则应在 55 个字符后进行修剪，并应有三个点（如尾巴）。例如：

1. 如何制作蛋糕
2. 如何制作冷饮...
3. 在家做咖喱...
4. 美味的西班牙鸡蛋

请注意第 2 点和第 3 点，多余的字符如何被修剪并替换为 3 个点。

这是代码：

省略号.pipe.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 ? "..." : "";
    return super.transform(value, 0, maxLength) + suffix;
  }
}

注：我...implements PipeTransform也尝试过。 …

在我的项目中，当用户更改另一个列表中的选定值时，我有时希望更新列表中的可用选项。为此，我使用了valueChanges运算符pipe，switchMap如下所示：

this.form.controls.typeControl.valueChanges
  .pipe(
    switchMap((typeId: number) => {
      return this.typesService.getProjectsByType(typeId);
    }),
  )
  .subscribe((projects) => {
    //...
  });

现在我遇到的问题是，我需要一次执行两个 http 请求来更新多个列表，而不是仅更新一个列表。当我尝试添加第二个时switchMap，我得到error TS2345: Argument of type 'OperatorFunction<number, Project[]>' is not assignable to parameter of type 'OperatorFunction<any, number>'.以下是我尝试执行此操作的方法：

this.form.controls.typeControl.valueChanges
  .pipe(
    switchMap((typeId: number) => {
      return this.typesService.getProjectsByType(typeId);
    }),
    switchMap((typeId: number) => {
      return this.typesService.getProgramsByType(typeId);
    }),
  )
  .subscribe(([projects, programs]) => {
    //...
  });

如何在此处添加第二个 http 请求，以便我可以处理 中两个请求收到的数据subscribe？