cdk-drop не является известным элементом - PullRequest
Новая
       41

cdk-drop не является известным элементом

0 голосов
/ 11 декабря 2018

Я использую новую функцию Angular 7 «Перетаскивание». Я выполнил все шаги в официальных документах: https://material.angular.io/cdk/drag-drop/overview

, но я получаю эту ошибку: **

Uncaught Error: Ошибки синтаксического анализа шаблона: 'cdk-drop' не является известным элементом: 1. Если 'cdk-drop' является угловым компонентом, то убедитесь, что он является частьюэтот модуль.2. Если 'cdk-drop' является веб-компонентом, то добавьте 'CUSTOM_ELEMENTS_SCHEMA' к '@ NgModule.schemas' этого компонента, чтобы подавить это сообщение.

**

вот мой код app.component.html: 

<cdk-drop cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let movie of movies" cdkDrag>{{movie}} 
  </div>
</cdk-drop>

вот мой код app.component.ts: 

import { Component } from '@angular/core';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    movies = [
    'Episode I - The Phantom Menace',
    'Episode II - Attack of the Clones',
    'Episode III - Revenge of the Sith',
    'Episode IV - A New Hope',
    'Episode V - The Empire Strikes Back',
    'Episode VI - Return of the Jedi',
    'Episode VII - The Force Awakens',
    'Episode VIII - The Last Jedi'
    ];

    drop(event: CdkDragDrop<string[]>) {
        moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
    }
}

Примечание: я использую => Angular: 7.1.2 & если я изменю элемент cdk-drop html на div , также не работающий: (* ​​1024 *

Ответы [ 2 ]

0 голосов
/ 19 декабря 2018

Документ, который вы читаете, должен быть устаревшим.Я проследил за публикацией в блоге и столкнулся с той же проблемой.

Элемент <cdk-drop> больше не существует.Вместо этого используется директива cdkDropList.

Убедитесь, что сначала проверяете последний документ, когда происходят странные ошибки.

На сегодняшний день этот пример работает https://stackblitz.com/angular/moyomqpeprev?file=app%2Fcdk-drag-drop-sorting-example.html

0 голосов
/ 11 декабря 2018

В вашем app.module.ts вы должны 

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

, а затем в массиве imports (в пределах @NgModule декоратор) того же файла добавить DragDropModule.

Также в @angular/material ничего не экспортируется, так как cdk-drop измените свою HTML-часть на: 

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div>
</div>
...