Question

开始使用angular（v4），尝试创建一个只包含下拉列表的可重用组件。但无法将其选定值传递给通过@Output()使用它的组件。请参阅plunker示例here

基本上，这是可重用的组件：

import { Component,  Output, EventEmitter, NgModule } from '@angular/core';

@Component({
  selector: 'app-group-selector',
  template: `
    <div>
      <label>Group</label>
      <select [ngModel]="selectedgroup" (ngModelChange)="onGroupChanged($event)">
        <option *ngFor="let groupName of groupNames" [ngValue]="groupName">{{groupName}}</option>
      </select>
    </div>`
})
export class SharedComponent {
  @Output() selectedgroup: EventEmitter<string> = new EventEmitter<string>();
  groupNames: string[];
  constructor() {
    this.groupNames = ['A', 'B', 'C'];  
    this.selectedgroup = 'A';
  }


  onGroupChanged(newvalue): void {
    console.log(newvalue);
    this.selectedgroup.emit(newvalue);
  }

}

以下是我想在另一个组件（app组件）中使用它的方法：

import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {SharedComponent} from 'src/shared.component';
import { FormsModule} from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Test</h2>
      <app-group-selector (selectedgroup)='onSelectedGroupChanged($event)'></app-group-selector>
    </div>
  `,
})
export class App {
  name:string;
  selectedGroup:string;
  constructor() {
    //this.name = ""//`Angular! v${VERSION.full}`
  }

  onSelectedGroupChanged(newgroup):void {
    this.selectedGroup = newgroup;
    console.log(newgroup);
  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ App, SharedComponent ],
  bootstrap: [ App ]
})
export class AppModule {}

显然问题出在<app-group-selector (selectedgroup)='onSelectedGroupChanged($event)'></app-group-selector> 我在plunker上遇到的错误是 instance[output.propName].subscribe is not a function 。在我的机器上我得到了一个不同的错误（可能是由于没有使用最新版本的角度，但我仍在使用v4）： ERROR TypeError: this.selectedgroup.emit is not a function

Answer 1

错误原因本身就是共享组件中的这一行：

this.selectedgroup = 'A';

您最初将this.selectedgroup设置为new EventEmitter<string>()，但在此处您将其替换为字符串值'A'。

您有一个更普遍的问题，即您尝试将this.selectedgroup用作EventEmitter和ngModel值。

编辑：我已经分割并编辑了原始示例here。

Answer 2

将SharedComponent修改为此，

export class SharedComponent {
  @Output() selectedgroup = new EventEmitter<string>();
  groupNames: string[];
  selectedGroup: string;
  constructor() {
    this.groupNames = ['A', 'B', 'C'];  
    this.selectedGroup = 'A';
  }
 onGroupChanged(newvalue): void {
    console.log(newvalue);
    this.selectedgroup.emit(newvalue);
  }

}

它适用于plunker。请注意新属性selectedGroup用于共享组件模板上的ngModel分配。

Answer 3

主要问题是您设置了selectedgroup的{{1}}相同的属性（{1}}，等于字符串，＆＃34; A＆＃ 34。

我从你的SharedComponent中分离出你的模型（现在是EventEmitter），现在事情记录得非常好。以下相关代码，带有工作内容here。

name

带有下拉列表的Angular 4 Output（）

3 个答案: