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>

角度2 ngmodel与自定义下拉列表

1 个答案: