Блог

Все, кого я пытаюсь использовать angular2-multiselect, и у меня проблема. Моя угловая версия 11

Это сообщение о проблеме

 Error: src/app/main/stores/stores-list/new-stores-sidebar/new-stores-sidebar.component.html:367:35 - error NG8002: Can't bind to 'data' since it isn't a known property of 'angular2-multiselect'.
1. If 'angular2-multiselect' is an Angular component and it has 'data' input, then verify that it is part of this module.
2. If 'angular2-multiselect' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

367             <angular2-multiselect [data]="itemList"
                                      ~~~~~~~~~~~~~~~~~

  src/app/main/stores/stores-list/new-stores-sidebar/new-stores-sidebar.component.ts:11:16
    11   templateUrl: './new-stores-sidebar.component.html'
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component NewStoresSidebarComponent.


Error: src/app/main/stores/stores-list/new-stores-sidebar/new-stores-sidebar.component.html:369:15 - error NG8002: Can't bind to 'settings' since it isn't a known property of 'angular2-multiselect'.      
1. If 'angular2-multiselect' is an Angular component and it has 'settings' input, then verify that it is part of this module.
2. If 'angular2-multiselect' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

369               [settings]="settings"
                  ~~~~~~~~~~~~~~~~~~~~~

  src/app/main/stores/stores-list/new-stores-sidebar/new-stores-sidebar.component.ts:11:16
    11   templateUrl: './new-stores-sidebar.component.html'
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component NewStoresSidebarComponent.
 

Это изображение проблемы

Это html-код.

 <angular2-multiselect [data]="itemList"
  [(ngModel)]="selectedItems" 
  [settings]="settings" 
  (onSelect)="onItemSelect($event)"
  (onDeSelect)="OnItemDeSelect($event)" 
  (onSelectAll)="onSelectAll($event)" 
  (onDeSelectAll)="onDeSelectAll($event)">
</angular2-multiselect>
 

Это .ts код

 import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-new-stores-sidebar',
  templateUrl: './new-stores-sidebar.component.html'
})

export class NewStoresSidebarComponent implements OnInit {
  public itemList = [];
  public selectedItems = [];
  public settings = {};

  /**
   * Constructor
   *
   * @param {CoreSidebarService} _coreSidebarService
   */
  constructor(
    private _coreSidebarService: CoreSidebarService,
    private _toastr: ToastrService
  ) {
    
  }

  ngOnInit() {
    this.closeImage = 'assets/images/close.png';

    this.itemList = [
      { "id": 1, "itemName": "India", "category": "asia" },
      { "id": 2, "itemName": "Singapore", "category": "asia pacific" },
      { "id": 3, "itemName": "Germany", "category": "Europe" },
      { "id": 4, "itemName": "France", "category": "Europe" },
      { "id": 5, "itemName": "South Korea", "category": "asia" },
      { "id": 6, "itemName": "Sweden", "category": "Europe" }
    ];

    this.selectedItems = [
      { "id": 1, "itemName": "India" },
      { "id": 2, "itemName": "Singapore" },
      { "id": 4, "itemName": "Canada" }
    ];

    this.settings = {
      singleSelection: false,
      text: "Select Fields",
      selectAllText: 'Select All',
      unSelectAllText: 'UnSelect All',
      searchPlaceholderText: 'Search Fields',
      enableSearchFilter: true,
      badgeShowLimit: 5,
      groupBy: "category"
    };
  }

  loadDataSet1(){
    this.selectedItems = [];
    this.itemList = [ { "id": 1, "itemName": "Apple", "category": "fruits" },
      { "id": 2, "itemName": "Banana", "category": "fruits" },
      { "id": 5, "itemName": "Tomatoe", "category": "vegetables" },
      { "id": 6, "itemName": "Potatoe", "category": "vegetables" }];
  }
  loadDataSet2(){
    this.selectedItems = [];
    this.itemList = [
      { "id": 1, "itemName": "India", "category": "asia" },
      { "id": 2, "itemName": "Singapore", "category": "asia pacific" },
      { "id": 3, "itemName": "Germany", "category": "Europe" },
      { "id": 4, "itemName": "France", "category": "Europe" },
      { "id": 5, "itemName": "South Korea", "category": "asia" },
      { "id": 6, "itemName": "Sweden", "category": "Europe" }
    ];
  }
  onItemSelect(item: any) {
    console.log(item);
    console.log(this.selectedItems);
  }
  OnItemDeSelect(item: any) {
    console.log(item);
    console.log(this.selectedItems);
  }
  onSelectAll(items: any) {
    console.log(items);
  }
  onDeSelectAll(items: any) {
    console.log(items);
  }
}
 

Я полагаю, ты это сделал…но…на всякий случай:

Вы импортировали модуль AngularMultiSelectModule в свой app.module.ts?:

app.module.ts

 import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown';

@NgModule({
  // ...
  imports: [
    AngularMultiSelectModule,
  ]
  // ...
})
 

Источник