当一个值在 ngFor 循环中动态传递给它时,我的指令失去了它的风格。
我有一个数据表列的指令,我在其中设置列的名称。
@Directive({ selector: '[my-dt-column]' })
export class MyDTColumn{
@Output() onSort: EventEmitter<any> = new EventEmitter();
@HostBinding('class.sorted-asc') sortedAsc;
@HostBinding('class.sorted-desc') sortedDesc;
_sortOrder: string;
public sort(order?: string){
this._sortOrder = order !== undefined ? order: (!this._sortOrder || this._sortOrder=='desc') ? 'asc' : 'desc'
this.sortedAsc = this.sortOrder === 'asc';
this.sortedDesc = this.sortOrder === 'desc';
}
get sortOrder(): string{
return this._sortOrder;
}
get isSorted(): boolean{
return this._sortOrder !== undefined && this._sortOrder !== null && this._sortOrder !== '';
}
column: string;
@Input('my-dt-column')
set setItem(column: any){
this.column = column;
}
@HostListener('click') onClick(){
this.sort();
this.onSort.emit({orderBy:this.column, sortOrder:this._sortOrder});
}
constructor(private el: ElementRef){}
}
还有它的一些样式,基本上设置了箭头图标的方向,指示该列是否已排序及其顺序。
:host >>>> table [my-dt-column]{
cursor: pointer;
}
:host >>>> table [my-dt-column] md-icon{
font-size: 10px;
height: 16px;
line-height: 16px;
vertical-align: middle;
opacity: 0;
color: rgba(0, 0, 0, 0.38);
transition: transform .25s, opacity .25s;
transform-origin: center center;
text-align: center;
}
:host >>>> table [my-dt-column].sorted-asc,
:host >>>> table [my-dt-column].sorted-desc{
color: rgba(0, 0, 0, 0.87);
}
:host >>>> table [my-dt-column].sorted-asc md-icon,
:host >>>> table [my-dt-column].sorted-desc md-icon{
opacity: 1;
color: rgba(0, 0, 0, 0.87);
}
:host >>>> table [my-dt-column].sorted-asc md-icon{
transform: rotate(0deg);
}
:host >>>> table [my-dt-column].sorted-desc md-icon{
transform: rotate(180deg);
}
:host >>>> table [my-dt-column]:hover md-icon{
opacity: 1;
}
我在 html 中用这个指令手动添加表头,像这样:
<th my-dt-column="ColumnName">some code</th>
<th my-dt-column="Column2Name">some code</th>
<th my-dt-column="Column3Name">some code</th>
<th my-dt-column="Column4Name">some code</th>
但是为了防止输入错误,我决定在我的父组件中使用我的列名称创建一个数组,并使用 ngFor 在 html 中动态添加。 所以我的代码变成了这样:
Style over 指令将不起作用,但列的名称已设置。
<ng-container *ngFor="let column of columns">
<th [my-dt-column]="column.name">some code</th>
</ng-container>
但是突然之间,我对这个指令的风格停止了工作。如果我将上面的代码指令更改为某个随机字符串,我的样式将起作用,但列名将不正确。
样式优于指令,但列名不正确。
<ng-container *ngFor="let column of columns">
<th my-dt-column="randomstring">some code</th>
</ng-container>
对于这样的问题我找不到任何答案,如果有任何帮助就好了。
编辑: 1 条更多线索:当我将一个随机字符串绑定(bind)到该指令时,它在我的 HTML 中设置(my-dt-column 指令):
<th _ngcontent-c11="" mdtooltipposition="right" my-dt-column="randomstring" ng-reflect-position="right" ng-reflect-message="" ng-reflect-set-item="randomstring" class="">some code</th>
但是当我尝试传递由 ngFor 生成的我的列的名称时,它不会在 HTML 中设置 EVEN(请注意,在下面的示例中,缺少 my-dt-column 指令。
<th _ngcontent-c11="" mdtooltipposition="right" ng-reflect-position="right" ng-reflect-message="" ng-reflect-set-item="InstrumentTypeName" class="">some code</th>
最佳答案
如果你想保留属性,我可以建议你使用 @HostBinding
之类的
import { HostBinding } from '@angular/core';
....
column: string;
@HostBinding('attr.my-dt-column') @Input('my-dt-column')
set setItem(column: any){
this.column = column;
}
get setItem() {
return this.column
}
如您所见,您还必须声明 getter。
另一种方法是在组件上使用 host
属性
host: {
'[attr.my-dt-column]': 'column'
}
关于html - 当绑定(bind)到 ngFor 中的值时,Angular 指令会失去其样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44891980/