无法绑定到“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" >