angular2 - 可重用组件 - 如何获取选择框的初始值?
问题描述:
我有这样的问题SO post但我的可重用选择组件也通过服务从服务器获取数据。angular2 - 可重用组件 - 如何获取选择框的初始值?
我可以得到事件的变化,使用ngClass等...一切都很好的组件。唯一的问题是,我想获得选择的初始值,并不知道如何。
初始值应该是这个对象是什么,我想获得:
selectedEnvironment = this.staging; //Intial Value
我可以添加一个“请选择”来强制改变,但我不什么做
下面是我把我的选择
{{selectedEnvironment | json}}
<environment (change)="onChange($event)" [useForm]="false"></environment>
所以{{selectedEnvironment的HTML | json}}在加载时为空,但在更改时显示对象。默认属性设置..我只是不知道它是什么。
我试着使用:
[(ngModel)]="selectedEnvironment"
,但我得到这个错误:
platform-browser.umd.js:962 ORIGINAL EXCEPTION: No value accessor for ''
所以从我的构造
下面是该组件的HTML:
<select [(ngModel)]="selectedEnvironment" (ngModelChange)="onChange($event)"
[ngClass]="{'form-control': useForm}"
class="custom-select">
<option [ngValue]="i" *ngFor="let i of environments">{{i.name}}</option>
</select>
答
正如君特提到你可以实现ControlValueAccessor
对于这样的:
import { Component, Input, Output, OnInit, EventEmitter, Provider, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/common';
import { Environment } from './environment';
import { EnvironmentService } from './environment.service';
const SELECTOR_VALUE_ACCESSOR: Provider = new Provider(NG_VALUE_ACCESSOR, {
useExisting: forwardRef(() => EnvironmentSelectorComponent),
multi: true
});
@Component({
selector: 'environment',
providers: [SELECTOR_VALUE_ACCESSOR],
template: `
<select [(ngModel)]="selectedEnvironment" (ngModelChange)="onChange($event)"
[ngClass]="{'form-control': useForm}"
class="custom-select">
<option [ngValue]="i" *ngFor="let i of environments">{{i.name}}</option>
</select>`
})
export class EnvironmentSelectorComponent implements OnInit, ControlValueAccessor {
isLoading = true;
staging: Environment = {
id: '1',
name: 'staging'
};
selectedId: any;
selectedEnvironment: Environment;
@Input() useForm = false;
@Output() ngModelChange = new EventEmitter();
onChange(newValue:any) {
this.ngModelChange.emit(this.selectedEnvironment)
}
environments = [this.staging];
constructor(private environmentService: EnvironmentService) { }
ngOnInit(){
this.environmentService.getEnvironments()
.subscribe(environments => {
for (var i = 0; environments.length > i; i++) {
this.environments.push(environments[i])
}
this.selectedEnvironment = this.environments.find(x => x.id === this.selectedId);
},
null,
() => { this.isLoading = false; });
}
onModelChange: Function =() => {};
onModelTouched: Function =() => {};
writeValue(model: Environment) : void {
if(!model) return;
this.selectedId = model.id;
}
registerOnChange(fn: Function): void {
this.onModelChange = fn;
}
registerOnTouched(fn: Function): void {
this.onModelTouched = fn;
}
}
然后你就可以利用这样的:
<environment [(ngModel)]="selectedEnvironment" [useForm]="false"></environment>
又见工作plunkr https://plnkr.co/edit/xe824YAYpr2lMxgTvOK4?p=preview
+0
哇...我不会rstand如何工作,但它的工作。以上所有的我都过于愚蠢地生活在哪里?我想我必须把角色带到下一个层次。 – Tampa
实现' ControlValueAccessor'像解释在http://*.com/questions/37384373/angular-2-add-control-to-parent-components-form/37384802#37384802 –