[英]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.