Angular 4输出()下拉列表

Question

开始使用Angular（v4）开始，试图创建可重复使用的组件，该组件仅包含下拉菜单。但无法将其选定值传递给通过@Output()使用它的组件。请在此处查看Plunker示例

本质上，这是可重复使用的组件：

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);
  }
}

这是我想在另一个组件（应用程序组件）中使用它的方式：

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，尽管不使用最新版本的Angular）： ERROR TypeError: this.selectedgroup.emit is not a function

Answer 1

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

this.selectedgroup = 'A';

您最初将this.selectedgroup设置为new EventEmitter<string>()，但是在这里您要用字符串值'A'替换。

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

编辑：我在此处分叉并编辑了您的原始示例。

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

主要问题是您要设置您打算为EventEmitter的SharedComponent的相同属性（selectedgroup），等于字符串，" A"。

我将您的模型（现在的name）与您的EventEmitter分开，现在的内容非常好。下面的相关代码，在此处使用工作。

@Component({
  selector: 'app-group-selector',
  template: `
    <div>
      <label>Group</label>
      <select [(ngModel)]="name" (change)="onGroupChanged(name)">
        <option *ngFor="let groupName of groupNames" [value]="groupName">{{groupName}}</option>
      </select>
    </div>`
})
export class SharedComponent {
  @Output() selectedgroup: EventEmitter<string> = new EventEmitter<string>();
  groupNames: string[];
  // note new property here, to be used as ngModel
  name: string;
  constructor() {
    this.groupNames = ['A', 'B', 'C'];  
    this.name = 'A';
  }
  onGroupChanged(newvalue): void {
    console.log('from Shared:',newvalue);
    this.selectedgroup.emit(newvalue);
  }
}