无法使用NG-自动完成2

试图用NG2，自动完成以下这一点： - https://www.npmjs.com/package/ng2-completer 无法使用NG-自动完成2

我不断收到不同的错误，每次我试图在计算器或github上我结束了更多的错误一些解决方案，我发现时间。请帮我想出解决办法，我是很新的角度和有机会的话我在做某种根本性错误..

当前的错误，我看到：

Unhandled Promise rejection: Template parse errors: 
Can't bind to 'datasource' since it isn't a known property of 'ng2-completer'.

app.component.ts

import { Component } from '@angular/core'; 
import { CompleterService, CompleterData } from 'ng2-completer'; 

@Component({ 
    selector: 'app-component', 
    template: `<h1>Search color</h1> 
      <ng2-completer [(ngModel)]="searchStr" [datasource]="dataService" [minSearchLength]="0"></ng2-completer> 
      <h1>Search captain</h1> 
      <ng2-completer [(ngModel)]="captain" [datasource]="captains" [minSearchLength]="0"></ng2-completer>` 
}) 
export class AppComponent { 

    protected searchStr: string; 
    protected captain: string; 
    protected dataService: CompleterData; 
    protected searchData = [ 
    { color: 'red', value: '#f00' }, 
    { color: 'green', value: '#0f0' }, 
    { color: 'blue', value: '#00f' }, 
    { color: 'cyan', value: '#0ff' }, 
    { color: 'magenta', value: '#f0f' }, 
    { color: 'yellow', value: '#ff0' }, 
    { color: 'black', value: '#000' } 
    ]; 
    protected captains = ['James T. Kirk', 'Benjamin Sisko', 'Jean-Luc Picard', 'Spock', 'Jonathan Archer', 'Hikaru Sulu', 'Christopher Pike', 'Rachel Garrett' ]; 

    constructor(private completerService: CompleterService) { 
    this.dataService = completerService.local(this.searchData, 'color', 'color'); 
    } 
}

app.module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule,ReactiveFormsModule } from '@angular/forms'; 
import { AppComponent } from './app.component'; 

@NgModule({ 
imports: [ BrowserModule, FormsModule ], 
declarations: [ AppComponent ], 
bootstrap: [ AppComponent ] 
}) 

export class AppModule { }

个

systemjs.config.js（NG2补足者我这里补充）

/** 
* System configuration for Angular samples 
* Adjust as necessary for your application needs. 
*/ 
(function (global) { 
    System.config({ 
    paths: { 
     // paths serve as alias 
     'npm:': 'node_modules/' 
    }, 
    // map tells the System loader where to look for things 
    map: { 
     // our app is within the app folder 
     'app': 'app', 

     **'ng2-completer': 'node_modules/ng2-completer/ng2-completer.umd.js',** 


     // angular bundles 
     '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
     '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
     '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
     '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
     '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
     '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
     '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
     '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 

     // other libraries 
     'rxjs':      'npm:rxjs', 
     'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' 
    }, 
    // packages tells the System loader how to load when no filename and/or no extension 
    packages: { 
     app: { 
     defaultExtension: 'js', 
     meta: { 
      './*.js': { 
      loader: 'systemjs-angular-loader.js' 
      } 
     } 
     }, 
     rxjs: { 
     defaultExtension: 'js' 
     } 
    } 
    }); 
})(this);

来源

2017-08-02 Don Corleone

我能解决这个问题： -

两个变化做

1。）应用程序组件中的选择器必须是index.html中正在使用的标记。这个很重要。

2.）在模块文件： -

进口{Ng2CompleterModule}从 “NG2补足者”;添加了并在NgModule中导入了[] add Ng2CompleterModule以及

来源

2017-08-02 13:39:13

无法使用NG-自动完成2

回答

相关问题