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

Question

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

点击标题句柄中的按钮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并将其绑定到组件中的布尔属性，如下所示。在组件类

@Component ({ 
 
    ... 
 
    }) 
 

 
export class SomeComponent { 
 
    showItem: boolean = true; 
 

 
    }

X上的点击切换布尔值

<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>

然后