Angular 如何在所选列表项上添加css类

我有一个列表组，当使用ngClass指令选择一个项目时，我想添加一个css类

如何验证项目是否已选中

我只有一个选择。。这是一个边栏组件，当我选择一个选项时，它必须将其发送给父级（我使用@Output完成了这一操作），并且在所选选项上还有一个css类

这是我的component.html

<ul class="list-group">
    <li *ngFor="let option of options" (click)="selectOption(option)" class="list-group-item" [ngClass]="option ? 'activate-class' : 'deactivate-class'">
        {{option.title}}
    </li>
</ul>

{{option.title}}

组件技术

  @Output() optionSelected: EventEmitter<any> = new EventEmitter();
  options = [
    {
        title: "Activate account",
        value: NavigationOptions.ACTIVATE_VENDOR
    },
    {
        title: "Deactivate account",
        value: NavigationOptions.DEACTIVATE_VENDOR
    }
];

  constructor() { }

  ngOnInit() {
  }

  selectOption(option) {
    this.optionSelected.emit(option);
  }

@Output（）选项选择：EventEmitter=neweventemitter（）；
选项=[
{
标题：“激活帐户”，
值：NavigationOptions.ACTIVATE\u供应商
},
{
标题：“停用帐户”，
值：NavigationOptions.DEACTIVATE\u供应商
}
];
构造函数（）{}
恩戈尼尼特（）{
}
选择选项（选项）{
this.options selected.emit（选项）；
}

您可以将所选选项存储在变量中并检查：

public selectedOption;

selectOption(option) {
  this.optionSelected.emit(option);
  this.selectedOption = option;
}

然后在ngClass中检查此变量：

[ngClass]="option === selectedOption ? 'activate-class' : 'deactivate-class'"

或者，如果您只想设置激活类，而不需要停用类：

[class.activate-class]="option === selectedOption"

---

您可以将所选选项存储在变量中，并基于该变量动态显示类名

试着这样做：

HTML:

{{option.title}}

---

没有必要用代码使事情过于复杂或使ts文件膨胀

您只需在ts文件中有一个selectOption

TS:

selectOption; // If your option is an object, which it is - then consider adding an interface for it here    

也不需要“deactivate class”，如果类不存在，我们可以假设它不适用

HTML:

<ul class="list-group">
  <li *ngFor="let option of options" (click)="selectOption = option" class="list-group-item" [ngClass]="{'activate-class' : selectOption === option}">
    {{option.title}}
  </li>
</ul>

{{option.title}}

这取决于selectOption（）的功能，即在组件中存储所选选项的方式。在组件中添加方法

isOptionSelected（option）

，并在模板中使用它。显示选择多个项目时有用的

selectOption（option）

。我已使用.ts文件中的所有代码更新了我的问题；我只有一个选择。。这是一个边栏组件，当我选择一个选项时，它必须将其发送给父级（我使用@Output完成了此操作），并且在所选选项上有一个css类…请尝试修改后的答案最后一个问题。。。如何在默认情况下选择一个选项？在.ts文件中，设置selectedOption=“Activate account”

<ul class="list-group">
  <li *ngFor="let option of options" (click)="selectOption = option" class="list-group-item" [ngClass]="{'activate-class' : selectOption === option}">
    {{option.title}}
  </li>
</ul>