使用javascript将类添加到数组中的元素答案

【问题标题】：add class to element in array using javascript使用javascript将类添加到数组中的元素
【发布时间】：2020-05-10 21:04:48
【问题描述】：

问题陈述：有一个引导列表组。 “活动”类突出显示列表组中的选定项目。在加载组件（角度）时，应该预先选择几个列表项，这是我面临的问题。

HTML代码如下：

            <div class="list-group" *ngFor="let role of roles | filter : searchText">
              <a id="{{role}}" class="list-group-item list-group-item-info list-group-item-action" (click)="selectRole(role)"> 
                {{ role }}
              </a>
            </div>

ts 文件如下：

roles = ["Admin", "Developer", "Tester", "Production Support", "Marketing", "Admin1", "Developer1", "Tester1", "Production Support1", "Marketing1", "2Admin", "2Developer", "2Tester", "2Production Support", "2Marketing"]
  selectedRoles = ["Developer", "Marketing"]

  userForm = this.fb.group({
    name: [''],
    roles: this.fb.array([])
  })

  ngOnInit( ): void {
    this.patchRole()
    console.log(this.userForm.value)
  }

  patchRole(){
    console.log('patch value')
    this.userForm.patchValue({roles: this.selectedRoles});
    let elements = document.getElementsByClassName('list-group-item')
    console.log(elements)
    for (let i=0; i<this.roles.length; i++){
      for (let j=0; j<this.selectedRoles.length; j++){
        if (this.roles[i] === this.selectedRoles[j]){
          elements[i].className += ' ' + "active"
        }
      }
    }
  }

你能帮忙吗？

【问题讨论】：

标签： html angular getelementbyid

【解决方案1】：

我会使用ngClass 为列表项设置正确的类。

见：https://stackblitz.com/edit/angular-ivy-qhzmeb

<div class="list-group" *ngFor="let role of roles">
    <a id="{{role}}" class="list-group-item list-group-item-info list-group-item-action" (click)="selectRole(role)"
        [ngClass]="{'active': isSelected(role) }">
        {{ role }}
    </a>
</div>

然后实现一个检查角色是否包含的函数。

export class AppComponent  {
  fb = new FormBuilder()
  roles = ["Admin", "Developer", "Tester", "Production Support", "Marketing", "Admin1", "Developer1", "Tester1", "Production Support1", "Marketing1", "2Admin", "2Developer", "2Tester", "2Production Support", "2Marketing"]
  selectedRoles = ["Developer", "Marketing"]

  userForm = this.fb.group({
    name: [''],
    roles: this.fb.array([])
  })

  ngOnInit( ): void {
    this.patchRole()
    console.log(this.userForm.value)
  }

  selectRole(role) {
    let pos = this.selectedRoles.indexOf(role);
    if (pos === -1) {
      this.selectedRoles.push(role);
    } else {
      this.selectedRoles.splice(pos, 1);
    }
  }

  isSelected(role) {
    return this.selectedRoles.includes(role);
  }

  patchRole(){
    console.log('patch value')
    this.userForm.patchValue({roles: this.selectedRoles});
  }
}

【讨论】：