1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
| import {ChangeDetectionStrategy,Component,Input,OnInit,Output,EventEmitter,} from '@angular/core';
import { addListsType } from '../../Types/toDo'
import { NgFor, NgIf, NgClass, CommonModule } from '@angular/common';
＋ import {NgxPaginationModule} from 'ngx-pagination';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-to-do-list',
imports: [NgxPaginationModule,NgFor,NgIf,NgClass,FormsModule,CommonModule ],
templateUrl: './to-do-list.component.html',
styleUrl: './to-do-list.component.scss',
＋ changeDetection: ChangeDetectionStrategy.OnPush
})
＋ export class BasicExampleComponent implements OnInit {
＋ @Input() sendTodoList?:addListsType[] |any ;
@Input() sendItemId?: string;
@Input() sendErrorItemMessage?: string;
@Input() sendEditItem?: Observable<addListsType[]>;
@Output() newItem = new EventEmitter<addListsType>();
@Output() newId = new EventEmitter<string>();
@Output() newEvent = new EventEmitter<any>();
@Output() newUpdateItem = new EventEmitter<addListsType>();
openEditItem(item:any) {
this.newItem.emit(item);
}
editItem(item: any) {
this.newUpdateItem.emit(item);
}
openDeleteAlert(id:string) {
this.newId.emit(id)
}
deleteItem(id:string) {
this.newId.emit(id)
}
blurEvent(event:any) {
this.newEvent.emit(event)
}
// 每頁幾筆
＋ currentPage: number | undefined = 1;
// 當前頁面
＋ itemsPerPage: number = 10;
// 全部筆數
＋ totalItems: number | any
＋ pagePerOptions = [
＋ { value: 5, label: '5筆' },
＋ { value: 10, label: '10筆' },
＋ { value: 15, label: '15筆' },
＋ { value: 20, label: '20筆' },
＋ { value: 30, label: '30筆' },
＋ { value: 40, label: '40筆' },
＋ { value: 50, label: '50筆' },
＋ ]
// 選擇變換每頁顯示筆數
＋ changeItemsPerPage(item: any) {
＋ this.itemsPerPage = item.value;
＋ }
// 設備變換時改變每頁顯示
deviceWidth:number =screen.width;
deviceDisplay() {
if (typeof Screen !== undefined) {
switch (this.deviceWidth) {
case 1920:
this.itemsPerPage=20;
break;
case 1560:
this.itemsPerPage=15;
break;
case 1440:
this.itemsPerPage=10;
break;
}
}
}
ngOnInit(): void {
this.deviceDisplay()
}
}
|
scss樣式