标签: angular-pipe

尝试在 Angular 中实现管道。在意识到 ngFor 不适用于地图之后。一些研究让我相信未来的功能将会解决这个问题，但与此同时，mapToIterable 管道就是答案。

我有以下代码：

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

@Pipe({
  name: 'mapToIterable'
})
export class MapToIterablePipe implements PipeTransform  {
  transform(map: Map<string, Object>, args: any = []): any {
    const a: any[] = [];
    console.log(map.keys());  // <- works as expected
    for (const k in map) {
      if (map.has(k)) {
        console.log("hello");  // <- never executes
        console.log(k);
        a.push({key: k, val: map.get(k)});
      }
    }
    console.log(a); // <- always empty
    return a;
  }
}

export const MAPTOITERABLE_PROVIDERS = [
  MapToIterablePipe
];

map.keys() …

我有以下代码来管理用户，

@Component({
  selector: 'app-user',
  template: `
  <input [(ngModel)]="newUser"><button (click)="addNewUser()">add</button>
  <div *ngFor="let user of users$ |async">
    {{user}}
  </div>
  `
})
export class UserComponent {
  newUser: string;
  users$: Observable<any>;
  private _users = [];

  ngOnInit() {
    this.users$ = of(this._users);
  }

  addNewUser() {
    this._users.push(this.newUser);
  }
}

当我简单地将新用户推送到包含在 rxjs 中的 this._users 数组时，Angular 如何知道何时更新 html 中的 this.users$ of？角度异步管道如何检测可观察对象内部的变化？

我正在尝试在 component.ts 文件中使用此货币管道。但不会产生相同的结果。

{{ money |currency: 'EUR': 'symbol' : '' : locale}}
this.currencyPipe.transform(money, 'EUR', '', true);

我需要确定处理 Observable 的两种不同方法是否同样有效，或者一种方法是否会导致内存问题。

在以下示例中，foo$和bar是从服务接收其值的模板变量。每个都有自己的 Observable。在组件中，bar从订阅中明确给出其值，然后在OnDestroy(). foo$但是，它没有显式订阅服务，而是async在模板中使用管道。

是foo$和bar都是显示服务数据的有效方式，还是foo$因为没有取消订阅内存清理而有问题？

示例服务：

Injectable()
export class ExampleService {
    get foo$(): Observable<string> {
        return data.from.api;
    }

    get bar$: Observable<string> {
        return data.from.api;
    }
}

示例组件：

@Component({
    template: `
        <div>{{ foo$ | async }}</div>
        <div>{{ bar }}</div>
    `
})
export class ExampleComponent implements OnInit, OnDestroy {
    public foo$ = this._exampleService.foo$;
    public bar = '';
    private _destroy$ = new Subject();

    constructor(private …

我有这个垫子选择，我想按字母顺序排序。

 <mat-select [(ngModel)]="item" name="item" (selectionChange)="changeIdentificationOptions($event)">
    <mat-option *ngFor="let item of itemss" [value]="item">
              {{ item.name ? item.name: item.identity}}
    </mat-option>
</mat-select>

显示的选项名称是有条件的。每个项目都有一个可选名称。如果它确实有名称，那么将使用它，否则将使用身份名称。

我在 SO 上看到建议制作一个自定义 orderBy 管道，类似于这个答案Angular Material - dropdown order items 按字母顺序排列

但这是使用单个键进行排序的。我在制作定制管道方面不太有经验。这对我的案例有何作用？

如果我做：<h2>{{event.role | lowercase}}</h2>。src但是，如果我尝试在这样的属性中使用它：

<img src={{event.eventName | lowercase}} alt="">

我收到错误：

core.js:6237 ERROR DOMException: 
Failed to execute 'setAttribute' on 'Element': '|' is not a valid attribute name.

但是，它无法识别管道，无法正确使用管道，因此格式{{event.eventName}}可以正常工作。我该怎么做呢？

我期待着为绿色或红色的一些异步接收数据着色,具体取决于它的值.

为了处理竞争条件,我使用了一个Subject,它广播一个包含我感兴趣的数据的Object.

我成功地做了我想做的事,但结果代码非常难看:

<span [ngClass]="{greenClass: isPositive((mySubject | async)?.fieldData), redClass: !isPositive((mySubject | async)?.fieldData)}"> {{(mySubject | async)?.fieldData | number:'1.0-1' }} </span>

有没有更好的方法来解决这个问题？我试图在ngClass中放置一个三元表达式,但它没有用.将代码移回我的控制器是不行的,因为它会立即创建十个变量.

我的问题类似于此stackoverflow帖子

当我使用异步管道从firebase观察数据并将其显示在图表中时，可以看到图表，但在控制台中提示为空错误。没有异步管道，所有错误都消失了，但是我无法获取数据（这是异步数据）。请帮帮我。

由于我们有一种将时间戳转换为时间格式的角度方式,但我在网上搜索了很多,因此没有很好的解决方案.

我已经遵循Javascript转换,但没有得到所需的结果.我需要以这种格式获取数据EEEE,MMMM d,即1月25日星期二我知道我们可以在我们的模板中使用管道实现这一点,但不知道如何在打字稿中获得这个.

到目前为止,我已经把它转换成了这个期望结果的字符串

formatDate(date) {
   let d = new Date(date * 1000)
   return d.getMonth() + 1 + "," + d.getDate
}

并在我的代码中使用这样的

for(let i=0; i < this.lessons.length; i++){
      for(let j=1; j< this.lessons.length; j++){
        if(this.formatDate(this.lessons[i].start_time) === this.formatDate(this.lessons[j].start_time)){
          this.data.push({title: this.formatDate(this.lessons[i].start_time), lessons: []})
        }
      }
    }
    console.log(this.data)
  })

但是我的控制台中没有运气就是这样:

{title: "NaN,function getDate() { [native code] }", lessons: Array(0)}

任何人都可以帮助这个.提前致谢!

我正在尝试使用以下命令格式化货币

<h1>R$ {{item.valor | currency:"BRL":true:1.2 }}</h1> 

但是会显示此错误

digitsinfo.match is not a function

如何在Ionic 3中以正确的格式获得资金？