class 活动 CSS 问题 angular

Question

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

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;
  }

Answer 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.

class 活动 CSS 问题 angular

class active CSS issue in angular

css

angular-ui-bootstrap

angular