Javascript angular2gridster bekommt es

zu arbeiten Ich versuche, aus angular2gridster Javascript angular2gridster bekommt es

So habe ich die Bibliothek in einem neuen Winkel-cli Projekt installiert.

Als nächstes habe ich dies dem app.component.html hinzugefügt:

<gridster [options]="gridsterOptions" [draggableOptions]="{ handlerClass: 'panel-heading' }"> 

    <gridster-item *ngFor="let widget of widgets" 
       [(x)]="widget.x" [(y)]="widget.y" [(w)]="widget.w" [(h)]="widget.h"> 
    <!--some content--> 
    </gridster-item> 

</gridster>

und schließlich ich dies ist mein app.component.ts:

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.scss'] 
}) 
export class AppComponent { 
    title = 'app'; 

    widgets: Array<any> = []; 
    gridsterOptions = { 
    lanes: 5, 
    direction: 'vertical', 
    dragAndDrop: true, 
    resizable: true, 
    useCSSTransforms: true, 
    }; 
}

Schließlich laufe ich mein Projekt und bekomme keine Fehler im Konsolenprotokoll, sondern nur eine leere Seite in der Ansicht.

Ich bin ich etwas vergessen, warum funktioniert es nicht?

Quelle

2017-10-25 pedromartinez

Die Gridster-Komponente setzt nicht die height Eigenschaft des Containerelements (in Ihrem Fall wäre es <body> ich vermute). Wenn es Ihnen nichts ausmacht, durch das Raster zu scrollen, können Sie es einfach in eine <div> mit 100% Höhe platzieren. Wenn Sie jedoch wollen nicht in das Raster Scrollen, dann sollten Sie so etwas wie dies zu tun:

<div #gridsterContainer [style.height.px]="gridHeight" (window:resize)="onResize(gridsterContainer.getBoundingClientRect())"> 
    <gridster [options]="options"> 
     <gridster-item [item]="item" *ngFor="let widget of widgets"> 
      <!-- your widget here --> 
     </gridster-item> 
    </gridster> 
</div>

Und die onResize Methode sollte der Eltern Höhe berechnen, basierend auf wie viele Widgets, die Sie haben (Sie müssen kommen mit einer Formel für das) und setzen Sie dann die gridHeight Eigenschaft auf diesen Wert.

Quelle

2017-10-30 07:53:08

Javascript angular2gridster bekommt es

Antwort

Verwandte Themen