Question

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

列表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>。另外，请注意我使用了工作代码并将其移动到模块中，所以对于组件模板而言，这并不是一个明显的问题，比如拼写错误。所以我只能假设我在设置模块时做错了。

列表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" >

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

1 个答案: