Question

我正在开发第一个有角度的应用程序...它是针对不同类型的建筑工作的价格估算计算器。我试图使它只有选定的卡获得特殊的CSS（例如降低不透明度）。

我尝试通过在类中设置一个空状态变量来实现这一点，该变量更新为所选卡片名称的值，然后检查状态名称是否等于状态变量并应用＆＃ 34;有源＆＃34; css to it ...但它目前正在点击每张卡片而不仅仅是点击的卡片。

任何人都可以帮我解决我的错误吗？ 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>

Answer 1

您可以在组件上绑定一个布尔值，如isSelected，然后在事件发生时将其切换到true，并在变量为true时添加css类：

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

Answer 2

您正在使用status='drivewayOption.name'"，这使得右侧只是一个字符串而不是您必须执行的drivewayOption.name.Hence

(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>

并在组件中

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

应该做的伎俩

Angular 2：仅将CSS应用于* ngFor array

2 个答案: