角2個ngmodel自定義下拉

Question

我有一個自定義組件

import { Component, OnInit } from "@angular/core"; 

import { EmploymentType } from './employmenttype.model'; 
import { EmploymentTypeService } from "../employmenttype/employmenttype.service"; 
@Component({ 
    selector: 'employmenttype-dropdown', 
    templateUrl: 'employmenttype-dropdown.html' 
}) 
export class EmploymentTypeDropdownComponent implements OnInit { 
    selectedEmploymentType:EmploymentType = new EmploymentType('None',0,0); 
    employmentTypes = []; 
    constructor(private employmentTypeService: EmploymentTypeService){ 
    } 
    ngOnInit() {  
     this.employmentTypeService.getEmploymentTypes() 
      .subscribe(
       (employmentTypes: EmploymentType[]) => {     
        this.employmentTypes = employmentTypes;     
       } 
     ); 
    } 
} 

，這裏是模板

<select class="form-control" required="required" name="employment-type"> 
    <option *ngFor="let employmenttype of employmentTypes" value={{employmenttype.id}}> 
    {{employmenttype.name}} 
    </option> 
</select> 

我想在這樣的父組件使用它：

<employmenttype-dropdown ([ngModel])="employee?.employmentType" ></employmenttype-dropdown> 

但它不起作用。請幫助

Answer 1

確定這裏是作業組件

import { Component, OnInit, forwardRef } from "@angular/core"; 
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'; 

import { EmploymentType } from './employmenttype.model'; 
import { EmploymentTypeService } from "../employmenttypes/employmenttype.service"; 


const noop =() => { 
}; 
export const EmploymentTypeDropdownComponentValueAccessor: any = { 
    provide: NG_VALUE_ACCESSOR, 
    useExisting: forwardRef(() => EmploymentTypeDropdownComponent), 
    multi: true 
}; 

@Component({ 
    selector: 'employmenttype-dropdown', 
    templateUrl: 'employmenttype-dropdown.html', 
    providers: [EmploymentTypeDropdownComponentValueAccessor] 
}) 
export class EmploymentTypeDropdownComponent implements OnInit,ControlValueAccessor { 
    employmenttypes = []; 
    _value:any=''; 


    get value(): any { return this._value; }; 

    set value(v: any) { 
     if (v !== this._value) { 
      this._value = v; 
      this.onChange(v); 
     } 
    } 

    writeValue(value: any) { 
     this._value = value; 
     this.onChange(value); 
    } 

    onChange = (_) => {}; 
    onTouched =() => {}; 
    registerOnChange(fn: (_: any) => void): void { this.onChange = fn; } 
    registerOnTouched(fn:() => void): void { this.onTouched = fn; } 


    constructor(private service: EmploymentTypeService){ 
    } 
    ngOnInit() { 

     this.service.getEmploymentTypes() 
      .subscribe(
       (items: EmploymentType[]) => {      
        this.employmenttypes = items;     
       } 
     ); 
    } 
} 

和模板：

<select class="form-control" required="required" name="employmenttype"> 
    <option *ngFor="let x of employmenttypes" value={{x.id}}> 
    {{x.name}} 
    </option> 
</select> 

，這是我們如何使用它

<employmenttype-dropdown ([ngModel])="employee?.employmentType" name="employmenttype" ></employmenttype-dropdown>