array.map不是角管道中的函数

Question

我得到了这个错误错误类型错误:错误类型错误:数组。地图不是一个函数错误，而使用这个角管道，这里是代码。

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

}

Answer 1

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

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

为此，对管道进行以下更改：

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';

这是您的参考的工作示例演示代码。