如何實現在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>

然後