如何在angular2-grid中实现添加和删除griditem功能？

Question

我必须使用Angular2网格实现添加和删除框功能，下面是使用Angular2网格的示例框。

单击标题句柄中的按钮X，我想删除当前网格项。请建议如何实现添加和删除网格项功能？

<div class="grid" [ngGrid]="{\'max_cols\': 10,\'max_rows\': 10, \'auto_resize\': true}">
    <div [ngGridItem]="{'dragHandle': '.handle', 'fixed': true, 'col': 1, 'row': 1}">
        <div class="handle">Header <button type="button" (click)="selectClose()">X</button></div>
    </div>
</div>

Answer 1

对网格元素添加一个ngIf，并将其绑定到组件中的布尔属性，如此。单击X时切换布尔值。

＆＃13;

＆＃13;

<div class="grid" [ngGrid]="{\'max_cols\': 10,\'max_rows\': 10, \'auto_resize\': true}">
    <div [ngGridItem]="{'dragHandle': '.handle', 'fixed': true, 'col': 1, 'row': 1}" *ngIf="showItem">
        <div class="handle">Header <button type="button" (click)="showItem = !showItem">X</button></div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

然后在组件类

中

＆＃13;

＆＃13;

@Component ({
  ...
  })

export class SomeComponent {
  showItem: boolean = true;

  }

＆＃13;

＆＃13;

＆＃13;