传递具有@Input和@Output的事件和urls
传递具有@Input和@Output的事件和urls
提问于 2016-10-21 13:59:51
完全初学者对angular2，而不是一个有经验的网页开发，所以我道歉，任何极端的愚蠢，在这个问题上.
我在为下拉选择列表制作组件时遇到了一些问题。我的目标是在另一个组件中使用这个组件，并在每次按下选择列表上的选项时，在父组件中调用一个方法。
下面是下拉输入的模板(子组件)：
<div>
<select>
<option (click)="clicked($event)" *ngFor="let option of options">{{option.label}}</option>
</select>
</div>下面是这门课的样子：
export class DropdownInput {
// List of options for the dropdown to have
public options: InputOption[];
// Url for controller method to get options
@Input() url = "/api/LogViewer/GetOpts";
@Output() clickEvent = new EventEmitter();
public clicked(event) {
this.clickEvent.emit(event);
}
// Get list of options on construction
constructor(http: Http) {
http.get(this.url).subscribe(result => {
this.options = result.json();
});
}
interface InputOption {
value: string;
label: string;
}因此，根据我对我所拥有的理解，每个下拉选项都有一个单击时绑定到它的‘click ()’方法。该方法应将单击事件传递给父方法绑定到“clickEvent”的方法。
下面是我如何在父级中使用这个组件：
<dropdown-input (clickEvent)="typeClick($event)"></dropdown-input>父组件在类中具有此方法：
public typeClick(event) {
console.log(event);
}这个设计有根本的缺陷吗?还是我只是犯了个愚蠢的错误？在运行时，我不会收到任何错误或任何内容，但是更改下拉选项也不会记录任何内容。
第二个问题:是否有一种将url作为下拉组件输入的好方法？仅仅将"url="/api/LogViewer/GetOpts“放入下拉输入中就会产生错误。
谢谢!
为了避免XY问题，我这么做是因为我想创建一个基本上是输入面板(文本框、下拉选择、单选按钮、日历)的组件，我可以在许多不同的页面上动态创建这些输入(用于在数据表上进行过滤，等等)。我想这类似于一种形式，已经有一个解决方案了吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-10-21 14:11:05
您正在侦听选项上的(单击)事件，但应侦听更改事件。您还将实际事件传递给父组件，而您希望传递所选的值。你可以这样做：
<select (change)="onChange($event.target.value)">如果这样做，将使用选定的值来调用onChange方法，而不是实际的更改事件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40178628
复制相关文章
相似问题
腾讯云开发者
