Question

我使用ionic并创建了一个自定义管道，该管道接受表示图像数据的对象并返回该图像的URL。

管道文件看起来像这样......

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

@Pipe({
  name: 'eventImageLink',
})
export class EventImageLinkPipe implements PipeTransform {
  /**
   * Takes a value and makes it lowercase.
   */
  transform(value: string, ...args) {
    if(value){
      return `//res.cloudinary.com/***/image/upload/w_${window.screen.width},d_item_placeholder_e0lign.jpg/${value.image_version}/${args[0]}/${value.original_image_name}`;
    }
  }
}

我在导入管道的pipes.module.ts文件夹中创建了一个pipes文件...

import { NgModule } from '@angular/core';
import { EventImageLinkPipe } from './event-image-link/event-image-link';

@NgModule({
  declarations: [
    EventImageLinkPipe
  ],
  imports: [

  ],
  exports: [
    EventImageLinkPipe
  ]
})
export class PipesModule {}

在我将PipesModule导入组件以供使用之前，我收到以下错误...

打字稿错误

Property＆＃39; image_version＆＃39;类型＆＃39;字符串＆＃39;。

上不存在

我无法理解为什么当我还没有尝试使用它时会出现这个错误，而且它确实非常烦人。有人可以解释为什么管道正在被执行以及当我还没有将任何数据传递到管道中时如何防止这个错误抛出？

Answer 1

嗯，您声明了输入value: string，这意味着您将来会在其中传递string类型的对象。 string的类型没有image_version的属性，因为错误显示，这是一个错误，您的代码只是无法正常工作。您在尝试将value.image_version作为退货结果的一部分时，需要将value更改为合适的类型，不确定是否属于您的情况。

你可能有一个自定义类：

export class MyImage {
    image_version: string;
    original_image_name: string;
}

然后，您可以将value: MyImage声明为MyImage类的类型，并且Typescript可以使用它，因为它包含image_version和original_image_name两个属性，而不是{{1}输入。

此外，没有任何东西真正被执行，它只是TypeScript的静态类型检查，这可以防止你做出像这样的愚蠢错误。如果您不想使用静态类型检查功能，您也可以将其设置为string而不指定类型。这样你可以传递你想要的任何东西，如果它是一个错误的对象类型，它会在运行时崩溃。

导入管道投掷Typescript属性不存在错误

1 个答案: