как удалить и удалить плитку сетки с ее пространством из сетки с angular - PullRequest
Новая
       32

как удалить и удалить плитку сетки с ее пространством из сетки с angular

0 голосов
/ 25 февраля 2020

Я пытаюсь создать страницу, которая содержит список различных статей, у меня есть один компонент и перебирать список статей, мой вопрос

  1. , когда я закрываю / удаляю одну нужную мне статью он исчезает со страницы, а другой элемент занимает его место, чего я не могу сделать, потому что я использую GRID, и плитка Grid уже определена. Есть ли какие-либо решения или другие способы сделать это

Пример stackBlitz 

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

Compenent 

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

1 Ответ

1 голос
/ 25 февраля 2020

В Angular вы позволяете модели диктовать, какой должна быть HTML, вместо того, чтобы пытаться удалять элементы из DOM вручную.

В настоящее время вы строите свою сетку из своей модели - ХОРОШО

Вы пытаетесь удалить элементы из вашей сетки напрямую через DOM - BAD

Вместо этого вам нужно указать, какой элемент следует удалить при вызове функции удаления. Я собираюсь передать исходный элемент в функцию удаления, чтобы вы могли найти его массив и удалить его из массива. При изменении массива Angular перестроит компонент HTML.

. 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);
}

DEMO: https://stackblitz.com/edit/angular-material-grid-znlou6

...