错误类型错误：array.map 不是角度管道中的函数

Posted 2023-03-13

【中文标题】错误类型错误：array.map 不是角度管道中的函数

【英文标题】：ERROR TypeError: array.map is not a function in angular pipe

【发布时间】：2020-04-14 01:18:14

【问题描述】：

我收到此错误 ERROR TypeError: ERROR TypeError: array.map is not a function error while using this angular pipe and here is code.

export class CharacterWithCommasPipe implements PipeTransform 
  transform(array) 
    return array.map(item => item.name).join(', ');
  

【问题讨论】：

请同时发布使用此管道的视图代码，您很可能将一些不是数组的东西放入管道中

对象，，在 javascript 中没有方法 .map()。所以请确保它。

【参考方案1】：

您可能没有在数组上调用此管道。

理想情况下，如果管道的input 不是预期的格式，您应该确保抛出错误。这样它就会以更优雅的方式实现

为了做到这一点，对您的管道进行以下更改：

import  Pipe, PipeTransform  from "@angular/core";

@Pipe(
  name: "joiner"
)
export class JoinerPipe implements PipeTransform 
  transform(arrayToJoin: Array<any>, joinBy?: string) 
    if (arrayToJoin && arrayToJoin.map) 
      return arrayToJoin.map(item => item.name).join(joinBy || ", ");
    
    throw new Error('joiner pipe only expects an Array as a first argument');
  

然后你可以像这样使用它：

<p> With Joiner Value -  items | joiner: ' and ' </p>
<p> Without Joiner Value -  items | joiner </p>

<p> With wrong Input that throws error on the console -  someOtherItems | joiner: ', ' </p>

在看起来像这样的数据上：

items = [
   name: 'A' ,
   name: 'B' ,
   name: 'C' ,
   name: 'D' 
];

someOtherItems = 'ABCD';

---

这里有一个Working Sample Demo Code 供您参考。