событие angular2 не срабатывает

Я использую 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) не срабатывает! Пожалуйста, помогите кто-нибудь!!


angular angular2-directives
person S M    schedule 24.02.2016    source источник
comment
Какую версию Angular вы используете?   -  person Thierry Templier    schedule 24.02.2016
comment
@ThierryTemplier 2.0.0-бета.7   -  person S M    schedule 24.02.2016
comment
Спасибо! Почему вы устанавливаете CORE_DIRECTIVES в атрибуте provider?   -  person Thierry Templier    schedule 24.02.2016
comment
На самом деле я использовал метод проб и ошибок. Я также поместил CORE_DIRECTIVES в атрибут директив.. но показал тот же результат.   -  person S M    schedule 24.02.2016
comment
На самом деле, вам больше не нужно их устанавливать ;-)   -  person Thierry Templier    schedule 24.02.2016
comment
хорошо .. Это решило проблему?   -  person S M    schedule 24.02.2016
comment
Не могли бы вы добавить список библиотек, которые вы включаете в свою HTML-страницу?   -  person Thierry Templier    schedule 24.02.2016
comment
@ThierryTemplier Список библиотек: es6-shim/0.33.3/es6-shim.min.js, 0.19.20/system-polyfills.js, 2.0.0-beta.7/angular2-polyfills.js, tools/system. js, инструменты/typescript.js, 2.0.0-бета.7/Rx.js, 2.0.0-бета.7/angular2.dev.js, 2.0.0-бета.7/router.dev.js   -  person S M    schedule 24.02.2016
comment
Я не могу воспроизвести на своей стороне ваш код и библиотеки, которые вы используете. Какой браузер вы используете?   -  person Thierry Templier    schedule 24.02.2016
comment
браузер, который я использую, это Google Chrome   -  person S M    schedule 24.02.2016

Ответы (1)


arrow_upward
2
arrow_downward

Я немного обновил ваш код, так как у меня ошибка 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)...

Возможно, вы забыли включить файл Rx.js в свою HTML-страницу:

<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>
person Thierry Templier    schedule 24.02.2016
comment
Включена ли в вашу HTML-страницу библиотека Rx.js? - person Thierry Templier; 24.02.2016
comment
Я решил проблему. на самом деле проблема была связана с пользовательским интерфейсом Jquery. функция createDropdown() была запущена из jq при загрузке страницы, которая перезаписывает код HTML, и моя функция onSelect() скрывается. Большое спасибо за ответ! - person S M; 24.02.2016