angular2事件未触发

Question

我正在使用 angular2，我有一个下拉列表，并且我有一个要在 (change) 事件上调用的函数。但是这个事件没有触发。以下是我的代码

    import {Component, EventEmitter, OnInit} from 'angular2/core';
    import {perPageCount} from './interface';
    import {CORE_DIRECTIVES} from 'angular2/common';
    @Component({
    selector: 'table-content',
    template: 
     `<div class="dropdown-wrap ">
          <select name="" tabindex="1" (change)="onSelect($event.target.value)">
                  <option *ngFor="#perPageCount of perPageCounts; #i=index" value="{{perPageCount.value}}" [attr.selected]="i == 0 ? true : null" > 
                                    {{perPageCount.text}} 
                  </option>
          </select>
     </div>`,
    providers: [CORE_DIRECTIVES]
})
export class tablecontent {
    public perPageCounts: perPageCount[] = [
        { text: 10, value: 1 },
        { text: 25, value: 2 },
        { text: 50, value: 3 },
        { text: 100, value: 4 }
    ];
    public ipp: number = this.perPageCounts[0].text;

    onSelect(value) {
        this.ipp = null;
        for (var i = 0; i < this.perPageCounts.length; i++) {
            if (this.perPageCounts[i].value == value) {
                this.ipp = this.perPageCounts[i].text;
                console.log(this.ipp)
        }
    }
}

下拉列表正在加载，但onSelect(value) 函数未触发！请有人帮忙！！

Answer 1

我更新了一些你的代码，因为我有 TypeScript 错误，但它对我有用。调用onSelect 方法：

import {Component, EventEmitter, OnInit} from 'angular2/core';
import {CORE_DIRECTIVES} from 'angular2/common';

class perPageCount {
  constructor(public text: number, public value: number) { }
}

@Component({
  selector: 'first-app',
  template:
    `<div class="dropdown-wrap ">
      <select name="" tabindex="1" (change)="onSelect($event.target.value)">
        <option *ngFor="#perPageCount of perPageCounts; #i=index" value="{{perPageCount.value}}" [attr.selected]="i == 0 ? true : null" > 
          {{perPageCount.text}} 
        </option>
      </select>
    </div>`
  })
export class AppComponent {
  public perPageCounts: perPageCount[] = [
    new perPageCount(10, 1),
    new perPageCount(25, 2),
    new perPageCount(50, 3),
    new perPageCount(100, 4)
  ];
  public ipp: number = this.perPageCounts[0].text;

  onSelect(value) {
    this.ipp = null;
    for (var i = 0; i < this.perPageCounts.length; i++) {
      if (this.perPageCounts[i].value == value) {
        this.ipp = this.perPageCounts[i].text;
        console.log(this.ipp)
      }
    }
  }
}

我也像这样测试了你的代码，并且我的行为相同（调用了onSelect 方法）...

也许您忘记在您的 HTML 页面中包含 Rx.js 文件：

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script> <-------
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>