标签: angular-pipe

我正在构建具有 3d 模型列表的 Web 应用程序。我这样做是为了练习目的，以便获得有关 angular 2 的一些初步知识。

每个列出的模型都有名称、主图片、类别和滑块（图像数组）。

模型数据数组为：

export var MODELS: Model[] = [{ 
  id: 1, 
  name: 'Model 1', 
  image: 'app/img/models/model-1.jpg', 
  category: 'Cat 1',
  slides: [
    { alt: 'Model 1 front view' , url: 'app/img/models/model-2.jpg' },
    { alt: 'Model 1 rear view' , url: 'app/img/models/model-2.jpg' },
    { alt: 'Model 1 side view' , url: 'app/img/models/model-2.jpg' }
  ]  
},
{ 
  id: 2, 
  name: 'Model 2', 
  image: 'app/img/models/model-2.jpg', 
  category: 'Cat 2',
  slides: [
    { alt: 'Model 2 front view' , …

给定一个看起来像这样的模板

<some-component
  *ngIf="someColdObservable$ | async"
  [result]="someColdObservable$ | async"
></some-component>

和一个看起来像这样的 observable：

someColdObservable$: this.store.pipe(
  select(isAllowedToDoThis),
  filter(Boolean),
  flatMap(() => apiRequest())
);

该someColdObservable$被订阅两次（如预期），这反过来问题的两个API调用（这显然是一个代码味道，但让我们无视此刻）。

在这种情况下some-component不包含任何空检查，AsyncPipe如果在模板中评估apiRequest之前没有发出值AsyncPipe导致some-component抛出cannot access x of null（此时[result]仍然为空），则将返回空值，请参阅AsyncPipe参考源。

这是所有预期的行为（或至少在阅读源代码之后）但是，当我尝试通过添加shareReplayto来缓解发出两个请求someColdObservable$的问题时，我还解决了[result]在apiRequest()发出值之前为 null的问题。这对我来说毫无意义，因为我希望AsyncPipe仍然在null _latestValue这里返回一个，而使cannot access x of null错误未修复。但出于某种原因，添加shareReplay修复了上述两个问题。

这类似于共享时的 Angular 可观察行为奇怪，但仍然存在未解决的问题，即为什么要shareReplay解决此问题。

有人能指出我在这里缺少什么以及为什么在发出值之前AsyncPipe不再返回吗？nullapiRequest() …

我正在尝试编写一个first word在字符串中打印的管道。以下是我的错误代码，该代码不希望地显示first letter字符串。

例如。

PIPE

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

@Pipe({
  name: 'firstWord'
})
export class GetFirstWord implements PipeTransform
{
    transform(value: string, args: any[]): string | boolean
    {
        if (value === null) {return false;}
        const firstWords = [];
        for (let i = 0; i < value.length; i++)
        {
          const words = value[i].split(' ');
          firstWords.push(words[0]);
        }
        return firstWords[0];
    }
}

COMPONENT

userName: string = 'Chuck Norris';

TEMPLATE

{{ userName | firstWord }}

OUTPUT

C

DESIRED …

美好的一天,我一直试图按群组标题显示数组,我从网络服务获取我的数组,我想按群组标题显示项目

例

第1组第1项第2项第3项

第2组第1项第2项第3项

这是我的阵列

                [
                {
                    "id": "1",
                    "title": "Item 1",
                    "groups": [
                        {
                            "id": "2",
                            "title": "Communication"
                        }
                    ]
                },
                {
                    "id": "2",
                    "title": "Item 2",
                    "groups": [
                        {
                            "id": "2",
                            "title": "Communication"
                        }
                    ]
                },
                {
                    "id": "3",
                    "title": "Item 1",
                    "groups": [
                        {
                            "id": "1",
                            "title": "Creativie Art"
                        }
                    ]
                },
                {
                    "id": "4",
                    "title": "Item 3",
                    "groups": [
                        {
                            "id": "2",
                            "title": "Communication"
                        }
                    ]
                },
                {
                    "id": "5",
                    "title": "Item 2",
                    "groups": [
                        { …

我有一个对象数组，我试图用搜索值过滤它们

component ts

filterArray = [
    {'id': 1, 'name': 'ABC', 'type': 'IT'},
    {'id': 2, 'name': 'XYZ', 'type': 'Tech'},
    {'id': 3, 'name': 'LMN', 'type': 'IT'},
    {'id': 4, 'name': 'PQR', 'type': 'Software'},
    {'id': 5, 'name': 'JKL', 'type': 'hardware'},
    {'id': 5, 'name': 'EFG', 'type': 'hardware'}
  ];

 @ViewChildren('filterRef') filtedItems;

custom pipe

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

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    if (value && args) {
      const arr = value.filter((e: any) …

我在 ngFor 循环中显示一个对象列表，我想用管道过滤这个列表。

我的研究使我想到了这一点：

filter-by.pipe.ts：

import { Pipe, PipeTransform } from '@angular/core';
import { UserLink } from '../_models/user-link';

@Pipe({
    name: 'filterBy'
})
export class FilterByPipe implements PipeTransform {
    transform(items: User[], isActive: boolean): any {
        if (!items) { return []; }
        return items.filter(x => x.isActive === isActive);
    }
}

在 my.component.html 中：

<tr *ngFor="let item of items$|async|filterBy: {isActive: false}">
    <td>{{item.firstname}}</td>
    <td>{{item.lastname}}</td>
    <td>{{item.age}}</td>
</tr>

但结果不是我所期望的：我的数组是空的。

我想念什么才能让它发挥作用？

我在这个 stackblitz ( https://stackblitz.com/edit/angular-46atle ) 中尝试了我的解决方案并且它有效。但我仍然无法让它在我的项目中工作。我检查了对象的属性和代码的其余部分，但看不到我的错误在哪里

[编辑]

问题解决了！我正在过滤的对象和我认为我正在过滤的对象之间缺少一个演员表。！初学者的错误！

感谢您的建议！