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

【问题标题】：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：

【问题讨论】：

标签： javascript node.js angularjs angular

【解决方案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 演示让我知道？