在Angular2中，当我使用事件发射器时，选择框中的文本将消失

我想使用ngModelChange和EventEmitter使用select box组件中的值执行特定任务。但是，只要我发出（），选择框中的文本就会消失。当我移除发射器时，选择框就可以完美地工作。这是完整的代码

从'@angular/core'导入{Component，OnInit，Input，Output，EventEmitter}；
从“../../../services/ContributorApi”导入{ContributorApi}；
从“../../../models/model.Contributor”导入{Contributor}；
@组成部分({
选择器：“模块生成器讲师框”，
模板：`
选择讲师
{{contributor.first{u name}{{contributor.last{u name}}
`
})
导出默认类ModuleBuilderStructorSelect实现OnInit{
@Input（）指令索引：编号；
@Output（）set讲师=新的EventEmitter（）；
贡献者：贡献者[]；
selectedItem：贡献者；
构造函数（专用contributorApi:contributorApi）{
}
恩戈尼尼特（）{
this.contributorApi.getContractors（）.subscribe(
res=>{
this.contributors=res；
},
错误=>{
console.log（错误）；
}
);
}
onChange（值：Contributor）{
this.selectedItem=值；
emit（{index:this.instructor索引，id:this.selectedItem.id}）；
console.log（this.selectedItem）；
}
}

实际上，该代码工作正常

在parentComponent上导入此组件时，请确保使用正确的方法 eventemiter的实现。比如说

<module-builder-instructor-box (setInstructor)="ParentFuncName($event)"></module-builder-instructor-box>

---

您试图做的是自定义输入组件。一个很好的实践是实现ControlValueAccessor，这样您可以在调用组件时使用[（ngModel）]，并且它与Angle Forms集成良好，如果需要，您可以从外部提供更改回调：

<module-builder-instructor-box [(ngModel)]="myVariable" (change)="handleChange($event)"></module-builder-instructor-box>

---

在此完成教程：

我实际上发现了问题。它与发射器本身无关。

---

在发射器运行的函数中，我在父组件内部更改ngFor中使用的数组。这是在重置子组件，因此重置了选择框。

当您更改选择选项时，是否可以显示控制台日志？我不确定，但ngModelChange的$event不是参与者对象$event可以是任何类型的对象。在本例中，它是一个contributor对象。我发现问题的任何方式。谢谢你的帮助嗯，这似乎有很多额外的东西要补充。不管怎样，它现在对我起作用了。多谢了，你说得对，它起作用了。我实际上是在更改ngFor中用于设置selectbox组件数量的数组。这就是问题的根源

<module-builder-instructor-box [(ngModel)]="myVariable" (change)="handleChange($event)"></module-builder-instructor-box>

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

const noop = () => { };

@Component({
  selector: 'module-builder-instructor-box',
  template: `...`,
   providers: [
    {
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() => FibaInputTextComponent),
        multi: true
    }
],
})
export default class ModuleBuilderInstructorSelect implements ControlValueAccessor {
    //The internal data model
    private innerValue: any = '';

    //Placeholders for the callbacks which are later providesd
    //by the Control Value Accessor
    private onTouchedCallback: () => void = noop;
    private onChangeCallback: (_: any) => void = noop;

    //get accessor
    get value(): any {
        return this.innerValue;
    };

    //set accessor including call the onchange callback
    set value(v: any) {

        // Put what you want to do when selected value changes here

        if (v !== this.innerValue) {
            this.innerValue = v;
            this.onChangeCallback(v);
        }
    }

    //Set touched on blur
    onBlur() {
        this.onTouchedCallback();
    }

    //From ControlValueAccessor interface
    writeValue(value: any) {
        if (value !== this.innerValue) {
            this.innerValue = value;
        }
    }

    //From ControlValueAccessor interface
    registerOnChange(fn: any) {
        this.onChangeCallback = fn;
    }

    //From ControlValueAccessor interface
    registerOnTouched(fn: any) {
        this.onTouchedCallback = fn;
    }
}