Angular 如何在没有jquery的情况下在Angualr中使用Gridstack

我尝试在没有jquery的情况下使用Gridstack。它可以工作，但并不完美。我的问题是，小部件出了问题——它不是11个小部件，而是一个大元素

我是一个绝对的初学者，所以我希望你理解我所做的，因为我没有；）

我遵循了这个教程

仪表板.ts

export class DashboardComponent implements OnInit, AfterViewChecked {

    @ViewChild('gridStackContainer', {static: false}) gridStackContainer: ElementRef;
    
    @Input() public widgets: Widget[]; 
   

    public ngAfterViewChecked(): void {
      console.log('ngAfterViewChecked');
      //this.gridStackContainer.nativeElement = this.widgets;
      if (this.gridStackContainer) {
        this.gridStackContainer.nativeElement = this.widgets;
        //this.gridStackContainer.nativeElement.gridstack();
      }
    }

  public ngOnInit(): void {
    GridStack.init();
  }

  public ngOnChanges(changes: SimpleChanges): void {
     if (this.gridStackContainer) {
      this.gridStackContainer.nativeElement = this.widgets;
      GridStack.init();
     }
  }
}

  export class WidgetComponent implements OnInit {

  @HostBinding('class')
  gridClass = 'grid-stack-item';

  @HostBinding('attr.data-gs-x')
  @Input()
  public positionX: number;

  @HostBinding('attr.data-gs-y')
  @Input()
  public positionY: number;

  @HostBinding('attr.data-gs-width')
  @Input()
  public width: number;

  @HostBinding('attr.data-gs-height')
  @Input()
  public height: number;

  constructor() { }

  ngOnInit() {
  }
}

@Injectable({ providedIn: 'root' })
export class WidgetService {

  protected _widgets$: Subject<Array<Widget>> = new Subject<Array<Widget>>(); 
  public widgets$: Observable<Array<Widget>> = this._widgets$.asObservable(); 

  public loadWidgets(): void {
     setTimeout(()=> {
      this._widgets$.next([
        { positionX: 0, positionY: 0, width: 4, height: 2, content: 'Widget 1' },
        { positionX: 4, positionY: 0, width: 4, height: 4, content: 'Widget 2' },
        { positionX: 8, positionY: 0, width: 2, height: 2, content: 'Widget 3' },
        { positionX: 10, positionY: 0, width: 2, height: 2, content: 'Widget 4' },
        { positionX: 0, positionY: 2, width: 2, height: 2, content: 'Widget 5' },
        { positionX: 2, positionY: 2, width: 2, height: 4, content: 'Widget 6' },
        { positionX: 8, positionY: 2, width: 4, height: 2, content: 'Widget 7' },
        { positionX: 0, positionY: 4, width: 2, height: 2, content: 'Widget 8' },
        { positionX: 4, positionY: 4, width: 4, height: 2, content: 'Widget 9' },
        { positionX: 8, positionY: 4, width: 2, height: 2, content: 'Widget 10' },
        { positionX: 10, positionY: 4, width: 2, height: 2, content: 'Widget 11' },
      ]);
    }, 1000);
  }
}

dashboard.html

    <div #gridStackContainer class="grid-stack">
  <div class="grid-stack-item">
    <ng-container *ngFor="let widget of widgets">
      <app-widget [positionX]="widget.positionX" [positionY]="widget.positionY" [width]="widget.width"
        [height]="widget.height">
         <span>{{ widget.content }}</span>
      </app-widget>
    </ng-container>
  </div>
</div>

<div class="grid-stack-item-content">
  <ng-content></ng-content>
</div>

widget.html

    <div #gridStackContainer class="grid-stack">
  <div class="grid-stack-item">
    <ng-container *ngFor="let widget of widgets">
      <app-widget [positionX]="widget.positionX" [positionY]="widget.positionY" [width]="widget.width"
        [height]="widget.height">
         <span>{{ widget.content }}</span>
      </app-widget>
    </ng-container>
  </div>
</div>

<div class="grid-stack-item-content">
  <ng-content></ng-content>
</div>

widget.service.ts

export class DashboardComponent implements OnInit, AfterViewChecked {

    @ViewChild('gridStackContainer', {static: false}) gridStackContainer: ElementRef;
    
    @Input() public widgets: Widget[]; 
   

    public ngAfterViewChecked(): void {
      console.log('ngAfterViewChecked');
      //this.gridStackContainer.nativeElement = this.widgets;
      if (this.gridStackContainer) {
        this.gridStackContainer.nativeElement = this.widgets;
        //this.gridStackContainer.nativeElement.gridstack();
      }
    }

  public ngOnInit(): void {
    GridStack.init();
  }

  public ngOnChanges(changes: SimpleChanges): void {
     if (this.gridStackContainer) {
      this.gridStackContainer.nativeElement = this.widgets;
      GridStack.init();
     }
  }
}

  export class WidgetComponent implements OnInit {

  @HostBinding('class')
  gridClass = 'grid-stack-item';

  @HostBinding('attr.data-gs-x')
  @Input()
  public positionX: number;

  @HostBinding('attr.data-gs-y')
  @Input()
  public positionY: number;

  @HostBinding('attr.data-gs-width')
  @Input()
  public width: number;

  @HostBinding('attr.data-gs-height')
  @Input()
  public height: number;

  constructor() { }

  ngOnInit() {
  }
}

@Injectable({ providedIn: 'root' })
export class WidgetService {

  protected _widgets$: Subject<Array<Widget>> = new Subject<Array<Widget>>(); 
  public widgets$: Observable<Array<Widget>> = this._widgets$.asObservable(); 

  public loadWidgets(): void {
     setTimeout(()=> {
      this._widgets$.next([
        { positionX: 0, positionY: 0, width: 4, height: 2, content: 'Widget 1' },
        { positionX: 4, positionY: 0, width: 4, height: 4, content: 'Widget 2' },
        { positionX: 8, positionY: 0, width: 2, height: 2, content: 'Widget 3' },
        { positionX: 10, positionY: 0, width: 2, height: 2, content: 'Widget 4' },
        { positionX: 0, positionY: 2, width: 2, height: 2, content: 'Widget 5' },
        { positionX: 2, positionY: 2, width: 2, height: 4, content: 'Widget 6' },
        { positionX: 8, positionY: 2, width: 4, height: 2, content: 'Widget 7' },
        { positionX: 0, positionY: 4, width: 2, height: 2, content: 'Widget 8' },
        { positionX: 4, positionY: 4, width: 4, height: 2, content: 'Widget 9' },
        { positionX: 8, positionY: 4, width: 2, height: 2, content: 'Widget 10' },
        { positionX: 10, positionY: 4, width: 2, height: 2, content: 'Widget 11' },
      ]);
    }, 1000);
  }
}

@Injectable（{providedIn:'root'}）
导出类WidgetService{
受保护的_widgets$：Subject=new Subject（）；
公共widgets$：Observable=这个。_widgets$.asObservable（）；
公共loadWidgets（）：void{
设置超时（（）=>{
这个。下一个([
{positionX:0，positionY:0，宽度：4，高度：2，内容：'Widget 1'}，
{positionX:4，positionY:0，宽度：4，高度：4，内容：'Widget 2'}，
{positionX:8，positionY:0，宽度：2，高度：2，内容：'Widget 3'}，
{positionX:10，positionY:0，宽度：2，高度：2，内容：'Widget 4'}，
{positionX:0，positionY:2，宽度：2，高度：2，内容：'Widget 5'}，
{positionX:2，positionY:2，宽度：2，高度：4，内容：'Widget 6'}，
{positionX:8，positionY:2，宽度：4，高度：2，内容：'Widget 7'}，
{positionX:0，positionY:4，宽度：2，高度：2，内容：'Widget 8'}，
{positionX:4，positionY:4，宽度：4，高度：2，内容：'Widget 9'}，
{positionX:8，positionY:4，宽度：2，高度：2，内容：'Widget 10'}，
{positionX:10，positionY:4，宽度：2，高度：2，内容：'Widget 11'}，
]);
}, 1000);
}
}

我现在意识到，gridstack实际上不起作用，我没有得到实现的函数。所以问题是，在没有jquery的情况下，如何在Angular中使用Gridstack