Question

初学者到angular2而不是经验丰富的网络开发者，所以我为这个问题中出现的任何极端愚蠢道歉......

我在为下拉列表选择列表制作组件时遇到了一些麻烦。我的目标是在另一个组件中使用此组件，并在每次按下选择列表上的选项时调用父组件中的方法。

这是dropdown-input（子组件）的模板：

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

因此，根据我对所拥有内容的理解，每个下拉选项都会在点击时绑定到“clicked（）”方法。该方法应该将click的事件传递给父对象绑定到'clickEvent'的方法。

以下是我在父母中使用此组件的方式：

<dropdown-input (clickEvent)="typeClick($event)"></dropdown-input>

父组件在类中有这个方法：

public typeClick(event) {
    console.log(event);
}

这种设计是否存在根本缺陷，或者我只是犯了一个愚蠢的错误？运行时我没有收到任何错误或任何错误，但更改下拉选项也不会记录任何内容。

第二个问题：是否有一种传递url作为下拉组件输入的好方法？只需在dropdown-input的使用中输入“[url] =”/ api / LogViewer / GetOpts“就会出错。

谢谢！

P.S。为了避免XY问题，我正在做所有这些，因为我想创建一个基本上是一组输入（文本框，下拉选择，单选按钮，日历）的组件，我可以在许多不同的页面上动态创建（用于在数据表之上进行过滤等）。我想这与表格相似，是否有解决方案呢？

Answer 1

您正在收听选项上的（点击）事件，但您应该收听更改事件。当您想要传递所选的值时，您还将实际事件传递给父组件。你可以这样做：

<select (change)="onChange($event.target.value)">

如果这样做，将使用所选的值调用onChange方法，而不是实际的更改事件。

使用@Input和@Output传递事件和URL

1 个答案: