Angular 指令在绑定到 ngFor 中的值时失去其样式

Question

当一个值在 ngFor 循环中动态传递给它时，我的指令失去了它的风格。

我有一个数据table列的指令，我在其中设置列的名称。

@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){}
}

还有它的一些样式，它基本上设置了 arrow-icon 的方向，指示列是否排序及其顺序。

: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 中使用此指令手动添加 table headers，如下所示：

<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>

但是为了防止输入错误，我决定在我的 parent 组件中使用我的列名称创建一个数组，并使用 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 更多线索：当我将一个随机字符串绑定到该指令时，它在我的 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>

Answer 1

如果您想保留属性，我建议您使用 @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。

Plunker Example

另一种方法是在您的组件上使用 host 属性

host: {
  '[attr.my-dt-column]': 'column'
}

Plunker Example

Angular 指令在绑定到 ngFor 中的值时失去其样式

Angular directive loses its style when bound to value inside ngFor

html

css

angular2-directives

angular