angular2 - 可重用组件 - 如何获取选择框的初始值？

Question

我有这样的问题SO post但我的可重用选择组件也通过服务从服务器获取数据。

我可以得到事件的变化，使用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> 

Answer 1

正如君特提到你可以实现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