Angular指令在綁定內部值時失去其風格ngFor

Question

當在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中動態添加。 所以我的代碼變成這樣的：

指令樣式將不起作用，但列的名稱已設置。

<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（我-DT-列指令）：

<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（注意：在下面的例子中，我-DT-列指令缺少設置。

<th _ngcontent-c11="" mdtooltipposition="right" ng-reflect-position="right" ng-reflect-message="" ng-reflect-set-item="InstrumentTypeName" class="">some code</th> 

Answer 1

如果你想保留的屬性我可以建議您使用@HostBinding，如

​​

正如你所見，你也必須聲明getter。

Plunker Example

另一種方法是使用你的組件

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

Plunker Example