Angular 2:无法绑定到' uploader'因为它不是“输入”的已知属性。

时间:2017-07-25 12:32:27

标签: angular ng2-file-upload

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

我发现此模板错误:无法绑定到“上传者”#39;因为它不是输入'

的已知属性

UPDATE文件夹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,
items.module.ts

中的

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

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

imports: [  ...FileUploadModule ... ]   

应用\ app.module.ts

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

 imports: [  ...FileUploadModule ... ]  

应用\部件\布局\类别项\类别-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的各个帖子中尝试了多种导入组合&#39; FileUploadModule&#39; ,但似乎没有一种在我的情况下有效。

错误堆栈跟踪:

  

&#34;未捕获(承诺):错误:模板解析错误:↵无法绑定到&#39;上传器&#39;因为它不是“输入”的已知属性。 (&#34;↵↵

已经使用Google搜索了许多相关解决方案的帖子:

一些参考文献是:(但没有帮助)

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

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

2 个答案:

答案 0 :(得分:26)

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

<强>类别-items.module.ts

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

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

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

答案 1 :(得分:0)

添加到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,
    ..........,
    ........,
    ......,

]

应该可以。