angular - Angular2 klickhändelse utlöses inte
Jag försöker implementera en egen pagineringskomponent. Detta är en mall.
<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>
Komponentkod:
@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;
}
}
Jag använde en enkel array av nummer. Sedan ville jag lägga till knapparna Last/First. Jag skrev ett gränssnitt som innehåller två egenskaper: titel och sidnummer. Nu fungerar klickhändelsen inte. Vad är fel med min kod?
Svar #1
Jag tror att problemet är att funktionen changePage() har ett argument av typen IPage och du skickar ett nummer
public changePage(page: IPage) {
this.currentPage = page.number;
this.pageChanged.emit(null);
};
ändra det till
public changePage(num: number) {
this.currentPage = num;
this.pageChanged.emit(null);
};
Svar #2
Jag har fixat det! Det liknar den här frågan. Det genererade en ny array varje gång. Så Angular kan inte binda en händelse till arrayelement. @Günter Zöchbauer, detta borde vara bekant för dig.
