Добавить класс к элементу внутри * ngFor - PullRequest
Новая
       8

Добавить класс к элементу внутри * ngFor

0 голосов
/ 07 декабря 2018

У меня есть список элементов, сгенерированный с помощью *ngFor: 

<div *ngFor="let item of items"> 
  <div>
     <span>item.description<span>
     <span>item.price</span>
     <button (click)="removeItem(item.id)"> x <button>
  </div>
  ...

. Функции removeItem делают запрос DELETE к конечной точке API и удаляют элемент, но элемент остается впока я не обновлю страницу.

Мне нужно применить класс для установки display:none для удаленного элемента, я использовал это: 

<div *ngFor="let item of items" [class.dismissed]="itemRemoved">

В .tsфайл itemRemoved инициализируется следующим образом: 

itemRemoved: boolean = false;

И в функции removeItem устанавливается true, когда вызов API успешен: 

this.http.delete(url)
  .subscribe(
    response => {
      console.log("Item removed");
      this.itemRemoved = true;
    },

Нокласс применяется ко всем элементам.

Как применить класс только к удаляемому элементу?

Спасибо за помощь!

Ответы [ 3 ]

0 голосов
/ 07 декабря 2018

Просто присвойте isRemoved свойство вашему item, чтобы мы могли различить, какой элемент был удален.Таким образом, вам нужно передать весь элемент в функцию метода, а затем присвоить свойство isRemoved для item.в тогда вы определяете с помощью оператора if, если item удален.

HTML 

<div *ngFor="let item of items">
  <div *ngIf="!item.isRemoved">
     <span>item.description</span>
     <span>item.price</span>
     <button (click)="removeItem(item)"> x </button>
  </div>
</div>

Затем в вашем TypeScript 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  items = [
    {
      description: 'sample',
      price: 10
    }
  ];

  public removeItem(item) {
    item.isRemoved = true;
  }
}
0 голосов
/ 07 декабря 2018

Вам не нужен класс для удаления этого элемента из представления.Самый простой способ сделать это - удалить элемент из массива, который вы перебираете.В вашем примере: 

  removeItem(item) {
    this.http.delete(url)
      .subscribe(response => {
        console.log("Item removed");
        let index = this.items.indexOf(item);
        this.items.splice(index,1);
      })
  }

Надеюсь, будет полезным.

0 голосов
/ 07 декабря 2018

itemRemoved - общеклассовая переменная.Когда вы устанавливаете его в true, это верно для всех.Один из способов сделать это - получить массив идентификаторов, которые вы удалили, и передать функцию на вход класса, которая проверяет, находится ли идентификатор в указанном массиве.

(не проверено, но суть): 

export class MyComponent {
  removedItems: any[] = [];

  removeItem(item) {
    this.http.delete(url)
      .subscribe(response => {
        console.log("Item removed");
        this.removedItems.push(item);
      })
  }

  isRemoved(item) {
    return this.removedItems.find(i => item.id === i.id);
  }
}

Шаблон: 

<div *ngFor="let item of items" (click)="removeItem(item)" [class.dismissed]="isRemoved(item)">x</div>

Редактировать:

Или, как упоминал Хуан в комментариях, удалить элемент из массива, который вы перебираете.Зависит от того, как items заполняется.

...