Angular 2：无法绑定到“上传器”，因为它不是“输入”的已知属性答案

【问题标题】：Angular 2: Can't bind to 'uploader' since it isn't a known property of 'input'Angular 2：无法绑定到“上传器”，因为它不是“输入”的已知属性
【发布时间】：2017-07-25 12:32:26
【问题描述】：

我正在尝试将 ng2-file-upload 模块集成到我的应用程序中。

我收到此模板错误：无法绑定到“上传器”，因为它不是“输入”的已知属性

更新文件夹 str:

/src/app/app.module.ts

/src/app/components/layout/
                           layout.module.ts
                           other layout components files

                  /category-items
                            category-items.module.ts
                            category-items.component.ts

在 layout.module.ts 中

import { LayoutComponent } from './layout.component';

declarations: [
    LayoutComponent,

在 category-items.module.ts 中

import { CategoryItemsComponent } from './category-items.component';

import {FileUploadModule} from "ng2-file-upload";   

imports: [  ...FileUploadModule ... ]

app\app.module.ts

 import {FileUploadModule} from "ng2-file-upload";   

 imports: [  ...FileUploadModule ... ]

app\components\layout\category-items\category-items.component.ts

import { FileUploader } from 'ng2-file-upload';

@Component({
  selector: 'button-view',
  template: `

  <input type="file" class="form-control" name="single" ng2FileSelect [uploader]="uploader" />   

  `
  })

export class ButtonViewComponent implements ViewCell, OnInit {

...
 public uploader:FileUploader = new FileUploader({url:'http://lcoalhost:5000/upload'});

}

@Component({
  selector: 'app-category-items',
  templateUrl: './category-items.component.html',
  styleUrls: ['./category-items.component.scss']
})

export class CategoryItemsComponent implements OnInit {
...
}

或者如果我尝试如下：我得到意外的关闭 div 标签

<div ng2FileDrop
         (fileOver)-'fileOverBase($event)'
         [uploader]="uploader"
         class="well my-drop-zone">
        Base drop zone
    </div>

我在各种帖子的 app.module 中为 'FileUploadModule' 尝试了多种导入组合，但在我的情况下似乎都没有。

错误堆栈跟踪：

“未捕获（承诺中）：错误：模板解析错误：↵无法绑定到“上传器”，因为它不是“输入”的已知属性。（“↵ ↵

已经在谷歌上搜索了许多帖子以寻找相同的解决方案：

一些参考是：（但没有帮助）

https://github.com/valor-software/ng2-file-upload/issues/418

https://github.com/valor-software/ng2-file-upload/issues/608

【问题讨论】：

您是否在与CategoryItemsComponent 相同的模块中导入了FileUploadModule？即：CategoryItemsComponent 是否在 app.module.ts 中声明only？
已更新我的文件夹 str，您能告诉我缺少什么或我应该验证什么吗？
我怀疑你没有将模块导入正确的模块 - category-items.module.ts 你能粘贴它以便我验证
哦，伙计，我明白了...感谢其余部分，我必须在 category-items.module.ts 下导入 FileUploadModule
我会将其添加为未来用户的答案

标签： angular ng2-file-upload

【解决方案1】：

您需要在使用'upload' 声明组件的模块中导入FileUploadModule，在您的情况下为category-items.module.ts

category-items.module.ts

import { CategoryItemsComponent } from './category-items.component';

import { FileUploadModule } from "ng2-file-upload";   //Should import HERE

imports: [  ...FileUploadModule ... ]   //RIGHT PLACE

【讨论】：

谢谢，我已经用有效的答案更新了问题！
也许对于未来的用户阅读问题会更好，如果答案不在问题中，则尝试将其与自己的情况相匹配？你可以在修复之前发布组件，我可以在这里显示修复的版本
是的，谢谢@Ompurdy，已回复我的问题...您也可以在回答中提及我在更正前后导入的地方
@phyme 您也将它导入那里并不重要，因此我不建议将其删除，以防其他人也需要将其导入那里.
是的！这正是我一直在寻找的。文档需要更新。

【解决方案2】：

添加到 app.module.ts 这个

import { FileSelectDirective } from 'ng2-file-upload';
@NgModule({
    imports: [
        ...
],
    declarations: [
        FileSelectDirective
    ],
    providers: [
        ...
],
    bootstrap: [
        App,
    ],
})

https://github.com/valor-software/ng2-file-upload/issues/418#issuecomment-249865170

或者尝试将 FIleUploadModule 导入到每个父模块中

从 'ng2-file-upload' 导入 { FIleUploadModule }；

imports: [
    FIleUploadModule,
    ..........,
    ........,
    ......,

]

应该可以。

【讨论】：