Question

我有一个div，要在删除时添加过渡，我有一个按钮将其删除。在触发按钮时将css类添加到该div的方法是什么。

div是在* ngFor循环中创建的。

<div *ngFor="let attribute of attributes>
    <div [ngClass]="{' roll-out-blurred-left': a  }">
            {{attribute.name}} // on that div wants to add the class 
    </div> 
     <button (click)="onDelete(attribute)>
</div>

Answer 1

您可以使用以下方法来执行此操作。我正在考虑您要循环和添加div的每个属性都有一些ID。像这样：

attributes = [
    {"id": 0, "name": "one"},
    {"id": 1, "name": "two"},
    {"id": 2, "name": "three"}
];

维护一个变量，该变量指示被单击的属性（div）的当前ID。现在在“ * ngFor”中。假设这存储在名为“ removeId”的变量中。如果“ removeId”等于attribute（div）的ID，则向div添加一个类。

[ngClass]="{'idToRemove': attr.id == removeId}"

现在单击按钮，将'removeId'的值设置为相应的div ID。假设按钮点击会调用一个名为“ removeDiv”的函数，并接受相应的div ID作为参数。像这样：

<div class="Nodelete" [ngClass]="{'idToRemove': attr.id == removeId}"> 
   {{attr.name}}
   <button (click)="removeDiv(attr.id)">Delete</button>
</div>

然后在removeDiv函数中，执行以下操作：

removeDiv(index) {
 this.removeId = index;
}

您可以看到有效的示例here.

为简单起见，我只是更改单击的div的背景颜色。

Answer 2

作为一种简单的方法，我希望为每个属性对象设置一个额外的标志键（假设isDeleted，如果没有问题的话）。
这样就可以跟踪特定类（假设我们要在相应按钮单击时将deleted类应用于div）是否处于活动状态（已应用）。

component.html

<div *ngFor="let attribute of attributes; let i = index">
    <div [ngClass]="{ 'deleted': attribute.isDeleted  }">
      {{ attribute.name }}
    </div> 
    <button (click)="onDelete(i)">Toggle</button>
</div>

通过按钮的索引，我们可以在相应的属性对象上将isDeleted键设置为true或false。

component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  attributes = [
    { name: 'first' },
    { name: 'second' },
    { name: 'third' },
    { name: 'fourth' },
    { name: 'fifth' },
    { name: 'sixth' },
    { name: 'seventh' },
  ];

  onDelete(index: number) {
      // Toggle class on corresponding div
      this.attributes[index]['isDeleted'] = !this.attributes[index]['isDeleted'];
  }
}

component.scss

.deleted {
  // Your styles here
  color: red;
}

测试here。

Answer 3

Angular提供了一些添加条件的类的方法

有不同的类型：

输入一个

[class.my-class]="condition=='condition1'"

输入第二个

[ngClass]="{'my-class': condition=='condition1'}"

键入三

[ngClass]="{1:'my-class1',2:'my-class2',3:'my-class4'}[condition]"

键入四

[ngClass]="(condition=='condition1')?'my-class1':'my-class2'"

因此，在您的情况下，请使用属性作为条件，并根据需要选择一种类型。

单击按钮在div上添加课程

3 个答案: