Angular 2管道返回undefined

Question

我有像这样的json

[{
  "id": 9156,
  "slug": "chicken-seekh-wrap",
  "type": "dish",
  "title": "Chicken Seekh Wrap",
  "cuisine_type": [2140]
},
{
  "id": 9150,
  "slug": "green-salad",
  "type": "dish",
  "title": "Green Salad",
  "cuisine_type": [2141]
}]

我创建了一个像这样的管道来过滤angular2中的美食类型

@Pipe({
      name: 'filter',
      pure: false
 })
 export class FilterPipe implements PipeTransform {
     transform(list: Array<any>, searchTerm: any): Array<any> {
        if(!searchTerm) return list;
        else {
           return list.filter(item => item.cuisine_type[0] == searchTerm);
        } 
     }
 }

在视图中我像这样使用它

<li *ngFor="let dish of dishes | filter : 2140">
      <h2>{{dish.title}}</h2>
      <input type="checkbox" [formControlName]="dish.id" />
 </li>

但它给了我这样的错误

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'filter' of undefined
TypeError: Cannot read property 'filter' of undefined
    at FilterPipe.transform (filter.ts:20)
    at checkAndUpdatePureExpressionInline (core.es5.js:11241)
    at checkAndUpdateNodeInline (core.es5.js:12096)
    at checkAndUpdateNode (core.es5.js:12058)
    at debugCheckAndUpdateNode (core.es5.js:12687)
    at debugCheckDirectivesFn (core.es5.js:12628)
    at Object.View_FourthStepPage_1.currVal_0 [as updateDirectives] (FourthStepPage.html:26)

我不明白我做错了什么。请帮忙。感谢。

Answer 1

首先，删除不必要的＆＃39;）＆＃39;从你的* ngFor结束。 其次，发生错误是因为您将null传递给过滤器。 过滤器尝试在null上运行，并且因为您尝试过滤null，所以会弹出错误。 我的建议是添加一个检查，如果传递的值是有效的。尝试将管道更改为：

@Pipe({
      name: 'filter',
      pure: false
 })
 export class FilterPipe implements PipeTransform {
     transform(list: Array<any>, searchTerm: any): Array<any> {
        if(!list)
          return [];
        if(!searchTerm) return list;
        else {
           return list.filter(item => item.cuisine_type[0] == searchTerm);
        } 
     }
 }

通过这种方式，您可以避免解析未定义的值..

P.S 如果您的数据是从远程服务器获取的，并且菜肴可以观察它，那么您也必须使用异步管道。

Answer 2

从未见过这种语法......试试这个

<li *ngFor="let dish of dishes | filter : 2140">

Answer 3

如果您从后端获取列表，则可能是您尚未获取列表并且您的变量为undefined。你可以在这做两件事。

解决方案1 ​​

在管道中验证列表实际包含值。我不推荐这种方法，因为您将逻辑放在错误的位置。

良好的软件实践

管道应该只进行转换而不是别的。这就是我们所说的单一责任原则（SRP）。如果你不这样做，你将会得到膨胀的函数，这些函数在任何地方进行完整性检查，你的代码将需要更多的努力来测试。

更好的做法是在进行转换之前清理数据，即将列表的初始值设置为空数组[]。

解决方案2

确保列表最初为空或未触发*ngFor的div，这意味着您可以使用*ngIf隐藏它。

Answer 4

在2140 ")"之后你还有一个额外的*ngFor="let dish of dishes | filter : 2140)"删除它并尝试，它会起作用。我测试了它。