纳克-2 完成器

Angular 2 的自动完整组件.

本构成部分的依据是: 自动填充

点击 演示 或者说 倾斜

需要帮助

我不再经常使用这个图书馆,也没有时间适当维护它. 如果你正在使用 ng2 完成器 并有兴趣维持它 请告诉我!

安装

npm install ng2-completer --save

使用量

您想要使用 ng2 完成器的模块必须导入 Ng2CompleterModule 财务报告和审定财务报表 FormsModule (使用ngModel系统) 有关ng2完成器的指令. Ng2CompleterModule 提供 CompleterService,并宣布 ng2-completer 指令.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { AppComponent } from './app.component';
import { Ng2CompleterModule } from "ng2-completer";


@NgModule({
  imports: [
      BrowserModule,
      FormsModule,
      HttpClientModule,
      Ng2CompleterModule,
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

在组件中添加 ng2 完成器并创建数据源 :

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

@Component({
  selector: 'my-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 MyComponent {

  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');
  }
}

g2 完成用途 rxjs (韩语) 作为数据源的流. 有2个已准备好的数据源可用于获取本地和远程数据,但也有可能提供 生成项目流的自定义源.

System.js 配置

添加以下内容到 System.js 地图配置 :

   var map = {
       ...
       'ng2-completer': 'node_modules/ng2-completer/ng2-completer.umd.js'
   }

API 密码

g2 完成组件

g2 完成活动

g2 完成方法

本地数据

通过调用创建本地数据提供者 CompleterService.local。 。 。 .

参数

属性

远程数据

通过调用创建远程数据提供者 CompleterService.remote。 。 。 .

参数

属性

CSS课程

• .completer-holder
• .completer-input
• .completer-dropdown-holder
• .completer-dropdown
• .completer-searching
• .completer-no-results
• .completer-row
• .completer-image-holder
• .completer-image
• .completer-image-default
• .completer-title
• .completer-description
• .completer-list-item-holder
• .completer-list-item
• .completer-selected-row

贷项

• 本产品使用TMDb API,但未经TMDb认可或认证