Angular 4 Output（）with dropdown

angular（v4）入門，試圖創建一個簡單包含下拉列表的可重用組件。但無法將其選定值傳遞給通過@Output()使用它的組件。請參閱plunker例如here Angular 4 Output（）with dropdown

從本質上講，這是可重用的組件：

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> 我得到的運動員的錯誤是instance[output.propName].subscribe is not a function。在我的機器我得到一個不同的錯誤（可能是由於沒有使用最新版本的角度，雖然我仍在使用V4的）：ERROR TypeError: this.selectedgroup.emit is not a function

來源

2017-09-15 stt106

的原因錯誤本身就是這條線在您的共享組件：

this.selectedgroup = 'A';

您最初設置this.selectedgroup是一個new EventEmitter<string>()，但在這裏，你和一個字符串值'A'替換它。

如果您嘗試使用this.selectedgroup作爲EventEmitter和ngModel值，則會出現更一般的問題。

編輯：我已分叉和編輯您的原始示例here。

來源

2017-09-15 20:40:19

謝謝。在相關問題上，如何在選擇改變事件之前觸發來自消費組件（例如，此處的app組件）的共享模塊（例如，初始化的選定組）中的'ngModel'被觸發？例如，我需要根據初始選擇在消費組件中執行一些操作。 – stt106

一個選擇是在你的'SharedComponent'中使用'ngOnInit'，然後你可以直接在那裏調用'onGroupChanged（...）'或'emit'。如果還不清楚，可以搜索一下或者提出一個新問題。 –

這正是我所做的，例如在共享組件的'ngInit'中調用'emit'。但是如何在消費組件中接收它？我覺得我是如此接近它... – stt106

修改了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。注意用於共享組件模板上的ngModel賦值的新屬性selectedGroup。

來源

2017-09-15 20:39:59 amal

主要問題是您設置的SharedComponent相同的屬性（selectedgroup），您打算成爲您的EventEmitter，等於字符串「A」。

我從你的EventEmitter中分離出你的模型（現在的name），現在事情記錄得很好。下面的相關代碼，與工作plunk here。

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

來源

2017-09-15 20:40:47

Angular 4 Output（）with dropdown

回答

相關問題