[英]Reset Value of Attribute from directive to default when an event is fired in angular 4
下面是我為一個應用程序做的一個sort指令,其中表頭的默認情況下第一列排序順序為'asc',默認情況下其他列應該有'desc',因此當點擊它們時它們應該以'asc開頭'和第一列在點擊時以'desc'開頭:見下文
import { Directive, Input, Output, HostListener, EventEmitter, Renderer2, ElementRef, OnInit } from '@angular/core';
@Directive({
selector: '[appSort]'
})
export class SortDirective implements OnInit {
constructor(private renderer: Renderer2, private el: ElementRef) { }
ngOnInit() {
let th = this.el.nativeElement;
let span = this.renderer.createElement('span');
this.renderer.appendChild(th, span);
}
@Input() sortToggler: boolean
@Output() sortOrder = new EventEmitter();
@HostListener('click') onclick() {
this.sortToggler = !this.sortToggler;
if(this.sortToggler == true) {
let elems = document.querySelectorAll('.myTable thead tr th');
let th = this.el.nativeElement;
let span = th.children[0];
for(let i = 0; i < elems.length; i++) {
this.renderer.removeClass(elems[i].children[0], 'fa');
this.renderer.removeClass(elems[i].children[0], 'fa-caret-up');
this.renderer.removeClass(elems[i].children[0], 'fa-caret-down');
}
this.renderer.addClass(span, 'fa');
this.renderer.addClass(span, 'fa-caret-up');
this.sortOrder.emit('asc');
} else if(this.sortToggler == false){
let elems = document.querySelectorAll('.myTable thead tr th');
let th = this.el.nativeElement;
let span = th.children[0];
for(let i = 0; i < elems.length; i++) {
this.renderer.removeClass(elems[i].children[0], 'fa');
this.renderer.removeClass(elems[i].children[0], 'fa-caret-up');
this.renderer.removeClass(elems[i].children[0], 'fa-caret-down');
}
this.renderer.addClass(span, 'fa');
this.renderer.addClass(span, 'fa-caret-down');
this.sortOrder.emit('desc');
}
}
}
現在使用此指令的Html:
<table class="table table-striped myTable">
<thead>
<tr>
<th scope="col" class="wd-grid-0">
<input class="" name="roNbr" type="checkbox">
</th>
<th appSort [sortToggler]="true" (sortOrder)="getSortOrder($event, 'claimId')">Claim ID <span class="fa fa-caret-up"></span></th>
<th appSort [sortToggler]="false" (sortOrder)="getSortOrder($event, 'repairOrderNbr')">RO Number</th>
<th appSort [sortToggler]="false" (sortOrder)="getSortOrder($event, 'chassisNbr')">Chassis Number</th>
<th appSort [sortToggler]="false" (sortOrder)="getSortOrder($event, 'claimStatusCode')">Claim Status</th>
<th appSort [sortToggler]="false" (sortOrder)="getSortOrder($event, 'checkStatusCode')">Check Status</th>
<th appSort [sortToggler]="false" (sortOrder)="getSortOrder($event, 'fieldAuthInd')">FAS</th>
<th appSort [sortToggler]="false" (sortOrder)="getSortOrder($event, 'claimDate')">Create Date</th>
<th appSort [sortToggler]="false" (sortOrder)="getSortOrder($event, 'requestedAmount')">Requested</th>
<th appSort [sortToggler]="false" (sortOrder)="getSortOrder($event, 'locationId')">Loc</th>
<th appSort class="disableEvent">Notes</th>
<th appSort class="disableEvent">Delete</th>
</tr>
</thead>
</table>
因此,假設我點擊它可以根據需要運行它相應地執行'asc'和'desc'。 現在問題是假設按下一個按鈕說“SEARCH”會觸發一個事件。 我想將每個th的[sortToggler]值重置為其加載表時定義的默認值。 但是這不會發生,例如,如果我第一次點擊RO號列,它的值將是'asc',然后我點擊SEARCH再次點擊RO Number列....根據我需要的要求它再次成為'asc'但仍然會發出'desc'。 我嘗試了很多方法,但沒有一個是有效的。 檢查控制台,查看列點擊時發出的值。 現在搜索事件是空的,准備好了答案。 任何人都可以解決這個問題。 提前致謝。
這是工作演示。 https://angular-smc3hu.stackblitz.io
這里的一個小錯誤是沒有顯示字體真棒圖標。
您需要重新渲染表以重置@Input() sortToggler: boolean;
由於指令在單個行上並且它對“sortToggler”中的每一行保持TRUE / FALSE值,因此僅通過從“reset”按鈕重新設置“sortToggler”不起作用。
因此,為了重新呈現TABLE,它需要在DOM中銷毀,因此使用*nfIf
。
“重置”按鈕上的“appSort”指令是可選的,您可以將其刪除。
<button (click)="resetValue()" appSort resetBtn]="resetClicked">reset</button>
我希望這個能幫上忙!!!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.