要素の高さを変更できません

Question

ドラッグすることで要素のサイズを変更しようとしています（soなど）。私は簡単な指示文を書きました（後でゴーストバーを処理します）：

@Directive({ selector: '[drag-resize]' }) 
export class DragResizeDirective { 
    private dragging: boolean; 

    constructor(el: ElementRef, renderer: Renderer2) { 
     renderer.listen('window', 'mouseup', (e) => { 
      if (this.dragging) { 
       el.nativeElement.style.backgroundColor = 'red'; // Works fine. 
       el.nativeElement.style.height = `${e.pageY + 2}px`; // Not so much. 
       this.dragging = false; 
      } 
     }); 
    } 

    @HostListener('mousedown') onMouseDown() { 
     this.dragging = true; 
    } 
} 

問題は私が要素の高さを変更できないことです。他のスタイルもうまくいきます。私はAngular 4.0.3を使用しています。

コンピュー属性：

display: block; 
height: 244.781px; 
left: 0px; 
overflow-x: hidden; 
overflow-y: scroll; 
position: absolute; 
top: 655.422px; 
width: 1793px; 

* renderer.setStyle()はどちらか動作しません。

**サイズを変更しようとしている要素が、グリッドタイル（角材のmd-grid-tile）です。

***ディレクティブは他の要素でも機能します。

Answer 1

編集2：

私はmd-grid-list実装に掘ってきました。行の高さは、ngAfterContentCheckedがトリガーされるたびに再計算されます（code）。これはすべてのマウスイベントの後に発生し、おそらく高さを設定しても効果がない理由です。

md-grid-listのドキュメントでは、rowHeight（200pxなど）の入力パラメータを `md-grid-list 'に渡すことができます。これは行の高さを設定する最もクリーンな方法ですが、すべての行を同じサイズにスケーリングします。

効果が得られない場合は、ngAfterViewCheckedライフサイクルフックで高さを設定してみてください。

---

編集：

コードがdisplay: inline要素のサイズを変更しようとしている場合は、あなたが最初の例を適用する必要がそれにdisplay: inline-block。それ以外の場合は、高さの値は無視されます。

---

style.height属性は、数値が単位（例えば%、px、rem、em、vh）を有することを期待します。

これは動作するはずです：

el.nativeElement.style.height = `${e.pageX + 2}px`;