如何从 angular 的网格中删除和删除带有 space 的网格图块

Question

我正在尝试创建一个包含不同文章列表的页面，我有一个组件并遍历文章列表我的问题是

当我 close/delete 一篇文章时，我需要它从页面上消失，而另一个元素取代它，我不能这样做，因为我使用的是 GRID，并且已经定义了 Grid 磁贴 .有没有解决方案或其他方法可以做到这一点

<mat-grid-list [cols]="breakpoint" rowHeight="4:2"  
              (window:resize)="onResize($event)">
  <mat-grid-tile id="obj"
     *ngFor="let item of items"           
      [style.background]="'lightblue'">
      <div >
        <h2>Title</h2>
        <div>some sort of text in between</div>
        <button mat-raised-button class="mi-button" 
        (click)="delete()">Delete</button>
      </div>
  </mat-grid-tile>
</mat-grid-list>

组件

    delete(){
    document.getElementById("obj").style.display = 'none'
     }

Answer 1

在 Angular 中，您让模型决定 HTML 应该是什么，而不是尝试手动从 DOM 中删除元素。

您目前正在根据模型构建网格 - 好

您正在尝试直接通过 DOM 从您的网格中删除项目 - 错误

相反，您需要在调用删除函数时指明应删除哪个项目。我将把原始项目传递给删除函数，以便您可以找到它的数组并将其从数组中删除。当数组被修改时，Angular 将重建 HTML.

component.html

<mat-grid-tile *ngFor="let item of items">
  <h2>Title {{item.name}}</h2>  
  <button (click)="delete(item)">Delete</button>
</mat-grid-tile>

component.ts

delete(item) {
  const index = this.items.indexOf(item);
  this.items.splice(index, 1);
}

演示：https://stackblitz.com/edit/angular-material-grid-znlou6

如何从 angular 的网格中删除和删除带有 space 的网格图块

how to delete and remove a Grid tile with its space from a Grid with angular

grid

list

bootstrap-4

responsive

angular