Angular7 SCRIPT445：对象不支持此操作IE sortable.js

Question

我是使用angular7的usig可排序js，单击可排序图标时，我在IE中收到此错误：

SCRIPT445：对象不支持此操作

没有其他详细信息，除了：文件：polyfills.js，行：8103，列：25

试图调查或搜索解决方案，但没有任何结果可能会有所帮助？

删除sortable.js不会引发此错误。也可以在A5中使用

Answer 1

您可以参考以下步骤来使用sortablejs和angular-sortablejs。

1. 安装可排序包并导入引用。

   安装sortablejs。

   使用以下命令安装Sortablejs。

   npm install sortablejs --save
   

   然后，检查node_modules文件夹以验证它是否包含此插件。

   然后，打开angular.json文件添加js参考：

   "scripts": ["node_modules/sortablejs/Sortable.min.js"]
   

   安装angular-sortablejs

   使用以下命令安装angular-sortablejs：

   npm i sortablejs angular-sortablejs
   

   然后，在app.module.ts文件中，导入SortablejsModule，代码如下：

   import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';
   import { SortablejsModule} from 'angular-sortablejs'
   import { AppComponent } from './app.component';
   
   @NgModule({
     declarations: [
       AppComponent
     ],
     imports: [
       BrowserModule,
       SortablejsModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

2. 在角度组件中使用这些插件：

   app.component.ts：

   import { Component, OnInit } from '@angular/core';
   
   // import the sortablejs
   import * as Sortable from 'sortablejs'
   import { $ } from 'protractor';
   @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
   })
   export class AppComponent implements OnInit {
   title = 'angular-sample';
   
   cities = [
       'Ankara',
       'Moscow',
       'Munich',
       'Paris',
       'Washington',
   ];
   
   ngOnInit (){
   
       var el = document.getElementById('items');
       var sortable = Sortable.create(el);
   }
   }
   

   app.component.html

   <!--The content below is only a placeholder and can be replaced.-->
   <div style="text-align:center">
   <h1>
       Welcome to {{ title }}!
   </h1>
   </div>
   
   <h2>using angular-sortablejs</h2>
   <ul class="nav nav-pills mb-3" [sortablejs]="cities">
   <li class="nav-item" *ngFor="let city of cities">
       <a class="nav-link active mr-1">{{ city }}</a>
   </li>
   </ul>
   
   <h2>using SortableJS/Sortable</h2>
   <ul id="items">
       <li>item 1</li>
       <li>item 2</li>
       <li>item 3</li>
   </ul>
   

结果如下：

还有polyfill文件like this。