模板解析错误：没有将“exportAs”设置为“cdkDropList”的指令答案

【问题标题】：Template parse errors: There is no directive with "exportAs" set to "cdkDropList"模板解析错误：没有将“exportAs”设置为“cdkDropList”的指令
【发布时间】：2019-08-21 07:11:03
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

标签： angular angular-material angular7

【解决方案1】：

如API 中所述，您需要在模块中导入DragDropModule

import {DragDropModule} from '@angular/cdk/drag-drop';

@NgModule({
  ...
  imports: [
    ...
    DragDropModule
    ...

【讨论】：

是的，不久前从另一个帖子中修复了它
如果提出的解决方案对您有用，那么如果您接受我的回答或发布并接受对您有帮助的解决方案，其他有相同问题的人可能会发现它也很有用
@Thanthu，请提供其他帖子。

【解决方案2】：

对于那些刚接触 Angular 世界的人来说，这是一个额外的答案。在 Angular 中使用井号 (#) 来声明引用变量。以下引用变量#phone 在元素上声明了一个电话变量。

<input #phone placeholder="phone number" />

模板引用变量通常是对模板中 DOM 元素的引用。它还可以引用指令（包含组件）、元素、TemplateRef 或 Web 组件。在大多数情况下，Angular 将引用变量的值设置为声明它的元素。但如果你想使用指令。它应该在引用变量值中声明，如下例所示

<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>

ngForm 是一个指令。角度编译器应该知道。并在问题中

<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>

cdkDropList 也是一个指令。因此编译器应该知道它，因此它的模块应该导入到它使用的模块中

【讨论】：