Die Höhe des Elements kann nicht geändert werden

Question

Ich versuche, die Größe eines Elements durch Ziehen zu ändern (wie so). Ich schrieb eine einfache Richtlinie (wird Ghostbar später behandeln):

@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; 
    } 
} 

Das Problem ist, ich nicht Höhe des Elements ändern können. Andere Stile funktionieren gut. Ich benutze Angular 4.0.3.

Computed Attribute:

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

* renderer.setStyle() funktioniert auch nicht.

** Element, das ich versuche, die Größe zu ändern, ist eine Gitterkachel (md-grid-tile von Angular Material).

*** Richtlinie funktioniert auf andere Elemente.

Answer 1

Edit 2:

Ich habe in die md-grid-list Umsetzung gegraben. Die Zeilenhöhe wird jedes Mal neu berechnet, wenn ngAfterContentChecked ausgelöst wird (code). Dies geschieht nach jedem Mausereignis und ist wahrscheinlich der Grund, warum die Einstellung der Höhe keine Auswirkung hat.

Aus der md-grid-list Dokumentation kann ich sehen, dass Sie auch einen (z. B. 200px) Eingabeparameter an die `md-Grid-Liste übergeben können. Dies scheint die sauberste Methode zum Festlegen der Zeilenhöhe zu sein, skaliert jedoch alle Zeilen auf die gleiche Größe.

Wenn dies nicht der gewünschte Effekt ist, können Sie versuchen, die Höhe im Lebenszyklus-Hook ngAfterViewChecked einzustellen.

---

Edit:

Wenn Ihr Code ein display: inline Element, um die Größe versucht, zuerst ein Beispiel anwenden müssen display: inline-block dazu. Andernfalls wird der Höhenwert ignoriert.

---

Das Attribut style.height erwartet numerische Werte zu einer Einheit (z.B. %, px, rem, em, vh).

sollte diese Arbeit:

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