使用管道时出现属性绑定错误

Posted 2023-03-07

【中文标题】使用管道时出现属性绑定错误

【英文标题】：property binding error when pipes is used

【发布时间】：2021-06-20 01:09:02

【问题描述】：

我正在学习本教程

https://ultimatecourses.com/blog/angular-pipes-custom-pipes

我正在尝试让下面发布的代码正常工作。当我调用命令时

ng servr --open

我收到以下错误：

Error occurs in the template of component Appcomponent
ptoperty file does not exist on type Appcomponent

请告诉我为什么会收到此错误以及如何修复它

app.component.ts：

import  Component  from '@angular/core'
@Component(
    selector: 'app-root',
    templateUrl: './app.component.html'
)
export class AppComponent 
    file =  name: 'logo.svg', size: 2120109, type: 'image/svg' ;

app.component.html：

file.name

文件大小 |文件大小

【参考方案1】：

错误提示

类型 Appcomponent

上不存在属性文件

注意它的AppComponent...你已经声明了FileComponent

export class FileComponent 
    file =  name: 'logo.svg', size: 2120109, type: 'image/svg' ;

您只是在 Appcomponent 中使用来自 FileComponent 的属性 file

【讨论】：

我更改了它但仍然无法正常工作，我收到此错误错误发生在组件 AppComponent 的模板中。

【参考方案2】：

您在导入时有拼写错误 从'@angulat/core'导入组件

改成

从“@angular/core”导入组件

【参考方案3】：

为了使用管道，我们需要在提供者中传递它

我创建了stackblitz 演示，您可以查看，在我的情况下它工作正常，我附在此处以便您查看。

如果您仍然遇到任何问题，请告诉我对您有帮助。

https://stackblitz.com/edit/angular-9bk71w?file=src%2Fapp%2Fapp.module.ts

【讨论】：

您能告诉我我应该在文件中添加什么以使其运行吗？因为您的大部分导入都带有红色下划线

首先你需要创建一个管道。之后转到 app.module.ts 并添加我在上面的屏幕截图中添加的提供程序。现在您可以在 HTML 中将该管道与选择器一起使用。我添加了 stackblitz 演示，您可以在其中查看所有文件。请访问该链接。

你能分享你的代码吗？或者你能不能创建一个 stackblitz 演示让我知道？