Angular 2：將CSS應用於僅從* ngFor數組中選定的項目

我正在研究我的第一個角度應用程序...這是針對不同類型的建築工作的價格估算計算器。我試圖做到這一點，只有選定的卡片獲得特殊的CSS（如減少不透明度）。Angular 2：將CSS應用於僅從* ngFor數組中選定的項目

我試圖通過在類中設置一個空狀態變量來更新所選卡名稱的值，然後檢查狀態名是否等於狀態變量並將「活動」css應用於它......但它現在正在將這個類應用到每個卡上，而不僅僅是點擊卡。

任何人都可以幫我解決我出錯的地方嗎？ View of the app so far

//Component.ts 

export class EstimateChoices { 

option: string; 
status: string = ''; 

drivewayOptions = 
    [{name:'Driveway Addition (End)', imageSrc:'./assets/images/driveway-1.png'}, 
    {name:'Driveway Addition (Width)', imageSrc:'./assets/images/driveway-2.png'}, 
    {name:'New Driveway', imageSrc:'./assets/images/driveway-3.png'}, 
    {name:'Section Replace', imageSrc:'./assets/images/driveway-4.png'}, 
    {name:'Driveway Addition (Pad)', imageSrc:'./assets/images/driveway-5.png'}, 
    {name:'New Driveway (Round)', imageSrc:'./assets/images/driveway-6.png'}, 
    {name:'Driveway Addition (Round)', imageSrc:'./assets/images/driveway-7.png'}]; 

sidewalkOptions = 
    [{name:'New Sidewalk', imageSrc:'./assets/images/sidewalk-1.png'}, 
    {name:'New Sidewalk (Curved)', imageSrc:'./assets/images/sidewalk-2.png'}, 
    {name:'New Sidewalk (Angled)', imageSrc:'./assets/images/sidewalk-3.png'}, 
    {name:'Section Replace', imageSrc:'./assets/images/sidewalk-4.png'}]; 

patioOptions = 
    [{name:'New Patio (Round)', imageSrc:'./assets/images/patio-1.png'}, 
    {name:'New Patio', imageSrc:'./assets/images/patio-2.png'}, 
    {name:'New Patio (Round End)', imageSrc:'./assets/images/patio-3.png'}, 
    {name:'New Patio (Oval)', imageSrc:'./assets/images/patio-4.png'}, 
    {name:'Patio Addition (Round End)', imageSrc:'./assets/images/patio-5.png'}, 
    {name:'Patio Addition', imageSrc:'./assets/images/patio-6.png'}]; 

poolOptions = 
    [{name:'Pool Deck Replacement', imageSrc:'./assets/images/pool-1.png'}]; 

hotTubOptions = 
    [{name:'New Hot Tub Pad', imageSrc:'./assets/images/hot-tub-pad-1.png'}, 
    {name:'New Pad (Round)', imageSrc:'./assets/images/hot-tub-pad-2.png'}]; 

onSelect(option: string) { 
this.option = option; 
} 

}

這是車道作業類型一component.html片段...

<div class="options-container driveway-options" *ngIf="option === 'driveways'"> 
    <div *ngFor="let drivewayOption of drivewayOptions" class="col-xs-6 col-md-4"> 
     <div class="option-card" [class.active]="status==='drivewayOption.name'" 
(click)="status='drivewayOption.name'"> 
      <img class="estimate-option-image" [src]="drivewayOption.imageSrc"> 
      <p>{{drivewayOption.name}}</p> 
     </div> 
    </div>        
</div>

來源

2017-08-09 Corey Bush

使用'[ngClass] =「{active'：status === drivewayOption.name}」''而不是'[class.active]'。此外，你需要從'click'事件中刪除單引號，應該是'（click）=「status = drivewayOption.name」' – Nehal

您正在使用status='drivewayOption.name'"這使得righ牛逼右手邊只是一個字符串，而不是你所要做的

(click)="status=drivewayOption.name" without the quotes and 


status===drivewayOption.name without the quotes as wel

櫃面如果不鍛鍊試試這個

<div class="options-container driveway-options" *ngIf="option === 'driveways'"> 
<div *ngFor="let drivewayOption of drivewayOptions" class="col-xs-6 col-md-4"> 
    <div class="option-card" [class.active]="status===activeVariable" 

(click)="setActiveVariable({drivewayOption.name)"> 
     <img class="estimate-option-image" [src]="drivewayOption.imageSrc"> 
     <p>{{drivewayOption.name}}</p> 
    </div> 
</div>

的drivewayOption.name.Hence和組件

setActiveVariable(value){ 
this.activeVariable=value; 
}

應該訣竅

來源

2017-08-09 16:38:16

哇......非常感謝。刪除這些引號完美運作。 –

您可以將您的組件如isSelected上綁定一個布爾值，那麼你切換到true當你的活動發生，並且當變量爲真時，您添加css類：

<div class="row" [ngClass]="{row_selected: isSelected}"></div>

來源

2017-08-09 16:35:31 BogdanC

Angular 2：將CSS應用於僅從* ngFor數組中選定的項目

回答

相關問題