我正在尝试使用Angular Material进行拖放,如Transferring items between lists所示。
我正在尝试使用与示例中所示完全相同的代码,但在控制台中收到此错误:
未捕获的错误:模板解析错误:有 没有将“ exportAs”设置为“ cdkDropList”的指令
下面是我的代码,与链接中显示的代码相同,无论如何我还是要共享:
TS:
import {Component} from '@angular/core';
import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';
/**
* @title Drag&Drop connected sorting
*/
@Component({
selector: 'cdk-drag-drop-connected-sorting-example',
templateUrl: 'cdk-drag-drop-connected-sorting-example.html',
styleUrls: ['cdk-drag-drop-connected-sorting-example.css'],
})
export class CdkDragDropConnectedSortingExample {
todo = [
'Get to work',
'Pick up groceries',
'Go home',
'Fall asleep'
];
done = [
'Get up',
'Brush teeth',
'Take a shower',
'Check e-mail',
'Walk dog'
];
drop(event: CdkDragDrop<string[]>) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
transferArrayItem(event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex);
}
}
}
HTML:
<div class="example-container">
<h2>To do</h2>
<div
cdkDropList
#todoList="cdkDropList"
[cdkDropListData]="todo"
[cdkDropListConnectedTo]="[doneList]"
class="example-list"
(cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
</div>
</div>
<div class="example-container">
<h2>Done</h2>
<div
cdkDropList
#doneList="cdkDropList"
[cdkDropListData]="done"
[cdkDropListConnectedTo]="[todoList]"
class="example-list"
(cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
</div>
</div>
答案 0 :(得分:2)
如API中所述,您需要在模块中导入DragDropModule
import {DragDropModule} from '@angular/cdk/drag-drop';
@NgModule({
...
imports: [
...
DragDropModule
...
答案 1 :(得分:0)
对于那些刚接触棱角世界的人来说,这是一个额外的答案。 斜角使用井号(#)声明参考变量。以下参考变量#phone在元素上声明了电话变量。
function calculate(operation) {
if (operation === 'ADD') {
alert('The Operation is Addition');
} else if (operation === 'SUBTRACT') {
alert('The Operation is Subtraction');
}
}
addBtn.addEventListener('click', calculate.bind(this, 'ADD'));
subtractBtn.addEventListener('click', calculate.bind(this, 'SUBTRACT'));
模板引用变量通常是对模板中DOM元素的引用。它还可以引用指令(包含组件),元素,TemplateRef或Web组件。 在大多数情况下,Angular会将引用变量的值设置为声明该变量的元素。但是如果要使用指令。应该在参考变量值中声明它,例如下面的示例
<input #phone placeholder="phone number" />
ngForm是一个指令。而且角度编译器应该知道。 还有问题
<form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">
<label for="name"
>Name <input class="form-control" name="name" ngModel required />
</label>
<button type="submit">Submit</button>
</form>
cdkDropList也是一个指令。因此编译器应该知道它,因此它的模块应该导入到使用的模块中