Question

我有一个用*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函数向API端点发出DELETE请求，并成功删除了该项目，但是除非我刷新页面，否则该项目仍保留在视图中。

我想要的是应用一个类来将display:none设置为已删除的项目，我已经使用过：

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

在.ts文件中，itemRemoved的初始化如下：

itemRemoved: boolean = false;

当API调用成功时，在函数removeItem中将其设置为true：

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

但是该类适用于所有项目。

如何将类仅应用于要删除的项目？

感谢您的帮助！

Answer 1

itemRemoved是类范围的变量。当您将其设置为true时，则对所有人适用。一种实现方法是拥有一个已删除的ID数组，然后将一个函数传递给类输入，以检查ID是否在所述数组中。

（未经测试，但要旨）：

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>

编辑：

或者如Juan在评论中所述，从要迭代的数组中删除该项目。取决于items的填充方式。

Answer 2

只需为您的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;
  }
}

Answer 3

您不需要一个类就可以从视图中删除该项目。最简单的方法是从要迭代的数组中删除该项目。在您的示例中：

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

希望能对您有所帮助。

将类添加到* ngFor中的元素

3 个答案:

编辑：