typescript Angular2 单击事件未触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39720844/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular2 click event not firing
提问by Sergеу Isupov
I'm trying to implement custom pagination component. This is template.
我正在尝试实现自定义分页组件。这是模板。
<div *ngIf="totalItems != 0">
<ul class="pagination">
<li *ngFor="let page of pages" [ngClass]="{'active': currentPage == page.title}">
<a (click)="changePage(page)">{{page.title}}</a>
</li>
</ul>
<select>
<option *ngFor="let size of pageSizes">{{size}}</option>
</select>
</div>
Component code:
组件代码：
@Component({
selector: 'pager',
templateUrl: 'templates/pager.component.html',
styleUrls: ['styles/pager.component.css']
})
export class PagerComponent {
@Input() totalItems: number = 0;
@Input() lastText: string = "?";
@Input() firstText: string = "?";
@Input() nextText: string = "?";
@Input() prevText: string = "?";
public currentPage: number = 1;
pageSizes: Array<number> = [10, 15, 30];
public currentSize: number = this.pageSizes[0];
@Output() pageChanged = new EventEmitter();
get pages(): Array<IPage> {
var list = new Array<IPage>();
let pageCount = Math.ceil(this.totalItems / this.currentSize);
let start = Math.max(this.currentPage - 1, 1);
let end = Math.min(this.currentPage + 2, pageCount);
list.push({ title: this.firstText, number: 1 });
list.push({ title: this.prevText, number: this.currentPage - 1});
for (let i = start; i <= end; i++) {
list.push({ title: String(i), number: i });
}
list.push({ title: this.nextText, number: this.currentPage + 1});
list.push({ title: this.lastText, number: end});
return list;
}
public changePage(page: IPage) {
this.currentPage = page.number;
this.pageChanged.emit(null);
};
public resetCurrentPage(): void {
this.currentPage = 1;
}
}
I was using simple array of numbers. Then I wanted to add Last/Firts buttons. I wrote interface that contains two properties title and page number. Now click event doesn't work. What's wrong with my code?
我使用的是简单的数字数组。然后我想添加 Last/Firts 按钮。我编写了包含两个属性标题和页码的界面。现在单击事件不起作用。我的代码有什么问题？
采纳答案by Sergеу Isupov
I've fixed it! It's similar to this question. It generated new array each time. So angular can't bind an event to array item. @Günter Z?chbauer, it should be familiar to you.
我已经修好了！这类似于这个问题。它每次都生成新的数组。因此 angular 无法将事件绑定到数组项。@Günter Z?chbauer，您应该很熟悉。
回答by manu
I think the problem is function changePage() has an argument of type IPage and you pass a number
我认为问题是函数 changePage() 有一个 IPage 类型的参数，你传递了一个数字
public changePage(page: IPage) {
this.currentPage = page.number;
this.pageChanged.emit(null);
};
change it to
将其更改为
public changePage(num: number) {
this.currentPage = num;
this.pageChanged.emit(null);
};
