Question

我正在尝试在下面的html元素中同时使用常规类属性和类条件属性：

    <ul *ngIf="showDropdown">
      <li class="active" [class.active]="sIndex === x" (click)="dropdownSelect($event.target.value, x)" value="18203">All Groceries</li>
      <li [class.active]="sIndex === x" (click)="dropdownSelect($event.target.value, x)" *ngFor='let i of lists; let x = index' value="{{i.id}}">{{i.name}}</li>
    </ul>

我有第一个想要活跃的li但是有点击属性可以切换点击。有什么想法吗？

Answer 1

您可以使用

[ngClass]={"active": sIndex === x}

但是在您的代码中，默认情况下您已经将该类设置为“活动”，因此不会发生任何变化，总是会有活动类。

解释更多，你想做什么。

Answer 2

你的例子看起来很奇怪，无论发生什么事情，第一个li总是处于活动状态，并且li都具有使它们活动的相同条件。

试试这个

<ul *ngIf="showDropdown">
  <li  [class.active]="sIndex === x" (click)="dropdownSelect($event.target.value, x)" value="18203">All Groceries</li>
  <li [class.active]="sIndex !== x" (click)="dropdownSelect($event.target.value, x)" *ngFor='let i of lists; let x = index' value="{{i.id}}">{{i.name}}</li>
</ul>

这是添加类的正确方法，以防其真正的

[class.active]="sIndex === x"

Answer 3

我想出了答案。因此，如果您希望在单击时有活动类更改的条件，但首先要在任何元素上使用活动类，请执行以下操作：

[ngClass]="{'active': sIndex === x || first}" (click)="dropdownSelect($event.target.value, x)"

在点击时添加一个带有切换活动类的条件参数。

constructor(private api: API, private http: Http) {
    this.first = true;
}

在构造函数中首先设置为true。然后当有人点击时，你把它放入功能并将其设置为false;

dropdownSelect(v, x: number) {
    this.filter = v;

    this.sIndex = x;
    this.showDropdown = !this.showDropdown;
    this.first = false;
}

如何使用类有条件的类

3 个答案: