Angular 4 Невозможно связать с «xxx», так как это не известное свойство xxx Error - PullRequest
Новая
       22

Angular 4 Невозможно связать с «xxx», так как это не известное свойство xxx Error

0 голосов
/ 27 апреля 2019

У меня есть явный компонент, на который я пытаюсь сослаться, и я продолжаю получать эту сумасшедшую ошибку.У меня правильно установлен селектор и соответствующий HTML.По какой-то причине мое приложение не загружается и жалуется на то, что этот компонент не существует, хотя я заявляю об этом в своем модуле.Я на углу 4. 

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'data' since it isn't a known property of 'ng2-dual-list-box'.
1. If 'ng2-dual-list-box' is an Angular component and it has 'data' input, then verify that it is part of this module.
2. If 'ng2-dual-list-box' 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. (" class="row">
            <div class="col-md-8 col-md-offset-2">
              <ng2-dual-list-box [ERROR ->][data]="items" valueField="id" textField="name"
                                 [(ngModel)]="select"): ng:///SharedModule/ListboxModalComponent.html@27:33
'ng2-dual-list-box' is not a known element:

Это мой компонент 

import { Component, Input, Output, EventEmitter, OnInit, forwardRef } from '@angular/core';
import { FormGroup, FormBuilder, FormControl, NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/map';
const intersectionwith = require('../../../../node_modules/lodash.intersectionwith');
const differenceWith = require('../../../../node_modules/lodash.differencewith');

import { IItemsMovedEvent, IListBoxItem } from '../dual listbox models';

@Component({
    selector: 'ng2-dual-list-box',
    templateUrl: './dual-list-box.component.html',
    styleUrls: ['./dual-list-box.component.css'],
    providers: [{
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() => DualListBoxComponent),
        multi: true
    }]
})
export class DualListBoxComponent implements OnInit, ControlValueAccessor {

    // field to use for value of option
    @Input() valueField = 'id';
    // field to use for displaying option text
    @Input() set textField(fields: any) {
        if (Array.isArray(fields)) {
            this._textField = (fields.length > 0) ? fields : ['name'];
        } else {
            this._textField = (fields) ? [fields] : ['name'];
        }
    };

    @Input() separator = ' - ';   
    // array of items to display in left box
     @Input() set data(items: Array<{}>) {
       this.availableItems = [...(items || []).map((item: {}, index: number) => {
             let fields = this._textField.map((field) => {
                 return item[field];
             }).filter((data) => data != undefined);
             return ({
                 value: item[this.valueField].toString(),
                 text: fields.join(this.separator)
             }); 
         }).filter((data) => data != undefined)];
     };
    array of items to display in right box
}

Это мой HTML 

 <div class="row">
            <div class="col-md-8 col-md-offset-2">
              <ng2-dual-list-box [data]="items" valueField="id" textField="name"
                                 [(ngModel)]="selected"
                                 (onAvailableItemSelected)="log($event)"
                                 (onSelectedItemsSelected)="log($event)"
                                 (onItemsMoved)="log($event)"></ng2-dual-list-box>
            </div>
          </div>

Это мой модуль 

import { DualListBoxComponent } from '../shared/profile listbox/dual-list-box.component';
@NgModule({
  declarations: [  

    DualListBoxComponent
  ],  
  imports: [    
  ],
  providers: [  
    DualListBoxComponent  
  ],
  entryComponents: [
    DualListBoxComponent],
})
export class ResearchModule { }
...