Как одновременно разрешить выбирать только ОДИН элемент

Question

Angular 5 - вкл (клик), когда один узел активен, все остальные узлы должны быть неактивными.Выбранный узел станет зеленым («активный» в CSS - [ngClass]), а все остальные, которые не являются текущим выбранным узлом, должны стать черными.

вот мой HTML и машинописный HTML:

 <div class="row">
    <div class="col-xs-10 col-sm-10 col-md-8" (contextmenu)="onRightClick($event, node)">
      <div class="toggle" [ngClass]="{'active': node.isActive}" (click)="activeButton(node)">
        <div [ngStyle]="node.styles()">
            <i *ngIf="node.getChildren().length > 0 && !node.isExpanded()"
               (click)="node.toggle()">
              <i class="fa fa-plus"></i>
            </i>
            <i *ngIf="node.getChildren().length > 0 && node.isExpanded()"
               (click)="node.toggle()">
              <i class="fa fa-minus"></i>
            </i>
            <i *ngIf="node.getChildren().length === 0">
              <i class="fa fa-circle-notch"></i>
            </i>
              {{node.title}}

машинопись:

activeButton(node) {
if (node.isActive) {
  const index = this.data.indexOf(node);
  console.log(this.data.indexOf(node));
  if (this.data.indexOf(node) !== -1) {
    this.data[index] = node;
    console.log(this.data.indexOf(node));
    node.isActive = false;
  }
}
node.isActive = true;

}

Answer 1

Я бы посоветовал пойти по пути, который @Edub советовал в комментариях, так что это будет:

activeButton(currentNode): void {
  this.data = this.data.map(node => {
    node.isActive = false;
    return node;
  });

  // or this.data.forEach(node => node.isActive = false);

  if (currentNode.isActive) {
    const index = this.data.indexOf(currentNode);

    if (this.data.indexOf(currentNode) !== -1) {
      currentNode.isActive = false;
      this.data[index] = currentNode;
    }
  }

  currentNode.isActive = true;
}