使用組件串列如何添加活動類并將其從兄弟姐妹中洗掉。
在主要組件 HTML 中：
<app-item-desc *ngFor="let itemDesc of addedItem; let i = index" [itemlistDesc]="itemDesc"></app-item-desc>
串列的組件
<div class="order" (click)="select($event)">
<div class="order__left">
<h4 class="order__title">{{itemlistDesc.name}}</h4>
<p><span class="order__unit">{{itemlistDesc.unit}}</span> Units at ${{itemlistDesc.price}}/Units</p>
</div>
<div class="order__right">
<div class="order__total">
{{(itemlistDesc.price * itemlistDesc.unit)}}$
</div>
</div>
</div>
有沒有可能使用指令的方法？（角 2 ）
uj5u.com熱心網友回復：
在您的問題中，問題是您的陣列位于父組件中，而您想要子組件中的活動類。要從其他陣列元素中洗掉活動類，您必須將事件傳遞給父組件，以使另一個元素的活動類為假。
在孩子
import { Output, EventEmitter } from '@angular/core';
@Output() itemSelectEvent= new EventEmitter<string>();
select(array_item){
itemSelectEvent.emit(array_item.id);
}
在 Parent 中需要處理該事件
<app-item-desc *ngFor="let itemDesc of addedItem; let i = index" [itemlistDesc]="itemDesc" (itemSelectEvent)="selectEventHandler($event)"></app-item-desc>
selectEventHandler(event){
// event, you will get selected id here
for(let i=0;i < addedItem.length;i ){
if(addedItem[i].id == event){
addedItem[i]['is_active'] = true;
}else{
addedItem[i]['is_active'] = false;
}
}
}
在孩子中，您現在可以使用 is_active 添加指令
<div class="order" (click)="select($event)" [ngClass]="{'active': itemlistDesc.is_active}">
</div>
uj5u.com熱心網友回復：
如果您在組件中傳遞一些引數，您可以使用ngClass并有條件地放置和洗掉類，請檢查這個，
ngClass 檔案
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/399263.html
上一篇：AngularJs樣式多條件