无法绑定到"dropZones"，因为它不是'li'的已知属性

Question

我正在尝试将我为应用程序构建的组件进行操作，并将其部分移动到独立模块中。该组件使用ng2-dnd进行拖放支持。看起来这样：

list-editor.component.html

<ul dnd-sortable-container [sortableData]="list" [dropZones]="[id]">
  <li *ngFor="let value of list; index as i" 
      dnd-sortable [sortableIndex]="i" [dropZones]="[id]">
    <drag-handle></drag-handle>
    <ng-content></ng-content>
    <action-insert></action-insert>
    <action-delete></action-delete>
  </li>
</ul>

我显然缺少一些东西，因为在解析模板时，它抱怨dropZones不是<li>的属性。请注意，不抱怨<ul>，而是<li>。另外，请注意，我使用了工作代码，并将其移至模块中，因此，归咎于组件模板，就像错别字一样。因此，我只能假设我在设置模块时做错了什么。

list-editor.module.ts

import { NgModule }     from '@angular/core';
import { CommonModule } from '@angular/common';
import { DndModule } from 'ng2-dnd';
import { ListEditorComponent } from './list-editor.component';
import { DragHandleComponent } from './drag-handle/drag-handle.component'
import { ActionComponent }     from './action-button/action.component';
import { InsertComponent }     from './insert-button/insert.component';
import { DeleteComponent }     from './delete-button/delete.component';
@NgModule({
  imports: [
    CommonModule,
    DndModule.forRoot(),
  ],
  declarations: [
    ListEditorComponent,
    ValueComponent,
    DragHandleComponent,
    ActionComponent,
    InsertComponent,
    DeleteComponent
  ],
  exports: [
    ListEditorComponent,
    ValueComponent,
  ]
})
export class ListEditorModule { }

然后，我会像在应用中执行其他任何模块一样导入它：

app.module.ts

import { ListEditorModule } from '@module/list-editor/list-editor.module';
@NgModule({
  declarations: [ ... ],
  imports: [ ... , ListEditorModule, ... ],
  ...
})
export class AppModule { ... }

当然，我在应用程序中使用它：

<list-editor [list]="theList"><value></list-editor>

我做错了什么，还是某个地方有一个错误？

我刚刚更新为Angular 5.0.5。问题仍然存在。

Answer 1

只需从li删除 [dropZones] ，否则它将其视为输入，并期望Li元素具有

 <li *ngFor="let value of list; index as i" 
      dnd-sortable [sortableIndex]="i" >