角度中的类活动CSS问题答案

【问题标题】：class active CSS issue in angular角度中的类活动CSS问题
【发布时间】：2020-07-19 15:21:20
【问题描述】：

我有一个单独的图块组件，其中显示了所有数据列表，因此当我单击图块时，它应该在特定图块中显示活动类 CSS，但现在无论我点击哪里，它都会在所有图块中显示活动类。

div class="container-fluid" style="margin-top: 12px" *ngIf="!loading">  
    <div class="container-fluid " *ngIf="!done"> 
      <adm-tile 
      [heading]='heading'
      [orderno]='stock.id'
      [time]='stock.created_at'
      [category]='stock.request_category.name'
      [status_type]='getStatus(stock.status)'
      [name]='stock.requester.first_name'
      [branch]='stock.to_department.name'
      [date]='stock.delivery_date'
      [priority]='stock.priority'
      [index_no] = 'i'
      [data]= 'stock'
      [title]="'Requested To'"
      [title1] = "'From'"
      (selected)="onButton06($event)" 
 *ngFor="let stock of stock_list ; let i = index" ></adm-tile>


 <div class="wrapper-card __list-card --small-card" style="margin-top:-5px"  (click)="button01()" [class.active-border-selection]="index_no === selectedIndex1">
    <div class="media">
           <div class="media-body">
               <div class="rowa split" style="position: relative">
                 <div class="col-6" style="position: relative">
                     <div > 
                        <div  style="height: 19px;overflow: hidden !important;">
                            <label class=" bold2">{{heading}}</label><span class="bold2">:#{{orderno}} </span>
                             <span class="bold2 desktop"> - {{your_date | timeAgo}}</span>
                        </div>
                        <div style="height: 22px">
                            <label class="bold3 ">{{category}}</label>
                        </div>
                     </div>
             
                 </div>
             </div>
            </div>
    </div>
  
  </div>
   button01() {
    this.selectedIndex1 = this.index_no;
  }

【问题讨论】：

每当onButton06() 被触发时，尝试为其分配一个布尔变量，例如isActive，并通过服务或@Input 传递它，并使用该值在adm-title 中显示活动类。还有一件事，我建议您使用服务或单个输入对象来发送数据，而不是使用这么多输入。
@nitin9nair 我正在将 ngfor 的索引从父组件传递给子组件以分配给特定的磁贴仍然是相同的问题，因此如何在子区域中的 button6 中分配一个变量 is-active 并且活动类是在子组件中。
你能否为这个问题创建一个stackblitz，以便我可以理解这个问题并更好地帮助你？
@nitin9nair 请关注问题的stackbliz stackblitz.com/edit/…
使用stackblitz.com/edit/…解决问题

标签： css angular angular-ui-bootstrap

【解决方案1】：

根据您关于一次只能激活一个按钮或卡片的问题，请检查以下代码。您需要在父组件中设置活动，而不是在子组件中，因为所有子组件都是独立组件。

父组件

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

@Component({
  selector: 'payroll-search',
  template: `
    <div  *ngFor="let stock of stock_list ; let i = index" >
     <hr-files-search
     style="position: relative; display:block"
     (sendIndex)="getIndex($event)"
     [class.active-border-selection]="i == selectedIndex"
     [index_no] = 'i'
     ></hr-files-search>
    </div>
  `
})
export class PayrollSearchComponent {
  stock_list = [1,2,3,4,4,5];
  public selectedIndex: number;

  public getIndex(event) {
    this.selectedIndex = event;
  }
}

子组件

import { Component, Input , OnInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'hr-files-search',
  template: `
    <div class="card" (click)="button01(index_no)">
      <div class="card-content">
      <h6>hello</h6>
      </div>
    </div>
  `
})
export class HrFilesSearchComponent implements OnInit {
    @Input() index_no: any;
    @Output() sendIndex = new EventEmitter();
 ngOnInit() {

  }
  selectedIndex1;
  button01(index) {
    this.sendIndex.emit(index);
  }
}

这里是stackblitz solution。

【讨论】：