[英]Can't bind to 'ngFormControl' since it isn't a known native property
編輯: 角度2下拉多選未針對角度2 rc 4進行更新,因為它具有舊語法: [ngFormControl]="search"
並import {Control} from 'angular2/common'
並且我一直在嘗試更新源代碼語法角度2下拉多選擇使其工作
我正在嘗試使用angular 2下拉多選 ,只是嘗試獲得最基本的演示並運行。
但是當我嘗試加載頁面時,我收到此錯誤:
無法綁定到'ngFormControl',因為它不是已知的本機屬性(“”class =“form-control”placeholder =“{{texts.searchPlaceholder}}”aria-describedby =“sizing-addon3”[錯誤 - >] [(ngFormControl)] = “搜索”>
為什么我會收到此錯誤以及如何解決?
以下是相關信息:
文件夾結構:
我的組件取決於角度2下拉多選
import { Component } from '@angular/core';
import { MultiselectDropdown, IMultiSelectOption } from 'angular2-multiselect/src/multiselect-dropdown';
@Component({
selector: 'multiselect',
templateUrl: 'app/shared/multiselect.component.html',
directives: [MultiselectDropdown]
})
export class MultiselectComponent {
private myOptions: IMultiSelectOption[] = [
{ id: 1, name: 'Option 1' },
{ id: 2, name: 'Option 2' },
];
}
角度2下拉多選的ts文件正確地被轉換為js。
js文件結構:
angular 2下拉多選的源代碼:
/*
* Angular 2 Dropdown Multiselect for Bootstrap
* Current version: 0.1.0
*
* Simon Lindh
* https://github.com/softsimon/angular-2-dropdown-multiselect
*/
import {Component, Pipe, OnInit, HostListener, Input, ElementRef, Output, EventEmitter} from '@angular/core';
import {Control} from '@angular/common'
import {Observable} from 'rxjs/Rx';
export interface IMultiSelectOption {
id: number;
name: string;
}
export interface IMultiSelectSettings {
pullRight?: boolean;
enableSearch?: boolean;
checkedStyle?: 'checkboxes' | 'glyphicon';
buttonClasses?: string;
selectionLimit?: number;
closeOnSelect?: boolean;
showCheckAll?: boolean;
showUncheckAll?: boolean;
dynamicTitleMaxItems?: number;
maxHeight?: string;
}
export interface IMultiSelectTexts {
checkAll?: string;
uncheckAll?: string;
checked?: string;
checkedPlural?: string;
searchPlaceholder?: string;
defaultTitle?: string;
}
@Pipe({
name: 'searchFilter'
})
class SearchFilter {
transform(options: Array<IMultiSelectOption>, args: Array<string>): Array<IMultiSelectOption> {
return options.filter((option: IMultiSelectOption) => option.name.toLowerCase().indexOf(args[0].toLowerCase()) > -1);
}
}
@Component({
selector: 'ss-multiselect-dropdown',
pipes: [SearchFilter],
styles: [`
a { outline: none; }
`],
template: `
<div class="btn-group">
<button type="button" class="dropdown-toggle btn" [ngClass]="settings.buttonClasses" (click)="toggleDropdown()">{{ getTitle() }} <span class="caret"></span></button>
<ul *ngIf="isVisible" class="dropdown-menu" [class.pull-right]="settings.pullRight" [style.max-height]="settings.maxHeight" style="display: block; height: auto; overflow-y: auto;">
<li style="margin: 0px 5px 5px 5px;" *ngIf="settings.enableSearch">
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3"><i class="fa fa-search"></i></span>
<input type="text" class="form-control" placeholder="{{ texts.searchPlaceholder }}" aria-describedby="sizing-addon3" [(ngFormControl)]="search">
<span class="input-group-btn" *ngIf="searchFilterText.length > 0">
<button class="btn btn-default" type="button" (click)="clearSearch()"><i class="fa fa-times"></i></button>
</span>
</div>
</li>
<li class="divider" *ngIf="settings.enableSearch"></li>
<li *ngIf="settings.showCheckAll">
<a href="#" role="menuitem" tabindex="-1" (click)="checkAll()">
<span style="width: 16px;" class="glyphicon glyphicon-ok"></span>
{{ texts.checkAll }}
</a>
</li>
<li *ngIf="settings.showUncheckAll">
<a href="#" role="menuitem" tabindex="-1" (click)="uncheckAll()">
<span style="width: 16px;" class="glyphicon glyphicon-remove"></span>
{{ texts.uncheckAll }}
</a>
</li>
<li *ngIf="settings.showCheckAll || settings.showUncheckAll" class="divider"></li>
<li *ngFor="#option of options | searchFilter:searchFilterText">
<a href="#" role="menuitem" tabindex="-1" (click)="setSelected($event, option)">
<input *ngIf="settings.checkedStyle == 'checkboxes'" type="checkbox" [checked]="isSelected(option)" />
<span *ngIf="settings.checkedStyle == 'glyphicon'" style="width: 16px;" class="glyphicon" [class.glyphicon-ok]="isSelected(option)"></span>
{{ option.name }}
</a>
</li>
</ul>
</div>
`
})
export class MultiselectDropdown implements OnInit {
@Input() options: Array<IMultiSelectOption>;
@Input() settings: IMultiSelectSettings;
@Input() texts: IMultiSelectTexts;
@Input('defaultModel') selectedModel: Array<number> = [];
@Output('selectedModel') model = new EventEmitter();
@Output() selectionLimitReached = new EventEmitter();
@HostListener('document: click', ['$event.target'])
onClick(target) {
let parentFound = false;
while (target !== null && !parentFound) {
if (target === this.element.nativeElement ) {
parentFound = true;
}
target = target.parentElement;
}
if (!parentFound) {
this.isVisible = false;
}
}
private numSelected: number = 0;
private isVisible: boolean = false;
private search = new Control();
private searchFilterText: string = '';
private defaultSettings: IMultiSelectSettings = {
pullRight: false,
enableSearch: false,
checkedStyle: 'checkboxes',
buttonClasses: 'btn btn-default',
selectionLimit: 0,
closeOnSelect: false,
showCheckAll: false,
showUncheckAll: false,
dynamicTitleMaxItems: 3,
maxHeight: '300px',
};
private defaultTexts: IMultiSelectTexts = {
checkAll: 'Check all',
uncheckAll: 'Uncheck all',
checked: 'checked',
checkedPlural: 'checked',
searchPlaceholder: 'Search...',
defaultTitle: 'Select',
};
constructor(
private element: ElementRef
) { }
ngOnInit() {
this.settings = Object.assign(this.defaultSettings, this.settings);
this.texts = Object.assign(this.defaultTexts, this.texts);
this.updateNumSelected();
this.search.valueChanges
.subscribe((text: string) => {
this.searchFilterText = text;
});
}
clearSearch() {
this.search.updateValue('');
}
toggleDropdown() {
this.isVisible = !this.isVisible;
}
modelChanged() {
this.updateNumSelected();
this.model.emit(this.selectedModel);
}
isSelected(option: IMultiSelectOption): boolean {
return this.selectedModel.indexOf(option.id) > -1;
}
setSelected(event: Event, option: IMultiSelectOption) {
var index = this.selectedModel.indexOf(option.id);
if (index > -1) {
this.selectedModel.splice(index, 1);
} else {
if (this.settings.selectionLimit === 0 || this.selectedModel.length < this.settings.selectionLimit) {
this.selectedModel.push(option.id);
} else {
this.selectionLimitReached.emit(this.selectedModel.length);
return;
}
}
if (this.settings.closeOnSelect) {
this.toggleDropdown();
}
this.modelChanged();
}
getTitle() {
if (this.numSelected === 0) {
return this.texts.defaultTitle;
}
if (this.settings.dynamicTitleMaxItems >= this.numSelected) {
return this.options
.filter((option: IMultiSelectOption) => this.selectedModel.indexOf(option.id) > -1)
.map((option: IMultiSelectOption) => option.name)
.join(', ');
}
return this.numSelected + ' ' + (this.numSelected === 1 ? this.texts.checked : this.texts.checkedPlural);
}
updateNumSelected() {
this.numSelected = this.selectedModel.length;
}
checkAll() {
this.selectedModel = this.options.map(option => option.id);
this.modelChanged();
}
uncheckAll() {
this.selectedModel = [];
this.modelChanged();
}
}
嘗試使用版本0.2.0: angular-2-dropdown-multiselect
快速指導:
來自問題的Guid參考: 問題14
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.