Question

我正在创建3个按钮，这些按钮应该可以按顺序单击。因此，在单击第一个之后，第二个应该激活。检查我的逻辑工作的元素，但是CSS并没有改变。我是Angular的新手，在这里我做错了什么：

CSS：

.disabled {
  cursor: not-allowed;
  color: red;
}

HTML：

<div style="text-align:center">
  <div>
    <h6>TAG</h6>
    <a class="btn btn-info" (click)="setPackageClickable($event)">TAG FELISMERESE</a>
  </div>
  <div>
    <h6>CSOMAG</h6>
    <a class="btn btn-info" ngClass="{ disabled: {{this.packageClickable}} }" (click)="setpaletteClickable($event)">CSOMAG FELISMERESE</a>
  </div>
  <div>
    <h6>paletteA</h6>
    <a class="btn btn-info" ngClass="{ disabled: {{this.paletteClickable}} }">PALETTA FELISMERESE</a>
  </div>
</div>

模块：

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

@Component({
  selector: 'app-pairing-dashboard',
  templateUrl: './pairing-dashboard.component.html',
  styleUrls: ['./pairing-dashboard.component.scss']
})
export class PairingDashboardComponent implements OnInit {
  packageClickable: boolean;
  paletteClickable: boolean;
  setPackageClickable(event) {
    this.packageClickable = false;
  }
  setpaletteClickable(event) {
    this.paletteClickable = false;
  }
  constructor() {
    this.packageClickable = true;
    this.paletteClickable = true;
  }

  ngOnInit() {
  }

}

Answer 1

Doc

应该是：

<div style="text-align:center">
  <div>
    <h6>TAG</h6>
    <a class="btn btn-info" (click)="setPackageClickable($event)">TAG FELISMERESE</a>
  </div>
  <div>
    <h6>CSOMAG</h6>
    <a class="btn btn-info" [ngClass]="{'disabled': packageClickable}" (click)="setpaletteClickable($event)">CSOMAG FELISMERESE</a>
  </div>
  <div>
    <h6>paletteA</h6>
    <a class="btn btn-info" [ngClass]="{'disabled': paletteClickable}">PALETTA FELISMERESE</a>
  </div>
</div>

或者您可以使它变得更简单

[class.disabled]="packageClickable"

Answer 2

请勿在HTML中使用this.：

使用

 [ngClass]="{'disabled': packageClickable}"

OR

[class.disabled]="packageClickable"

Answer 3

您需要在此处使用[ngClass]而不是ngClass，并且您不需要此

[ngClass]="{ 'disabled': packageClickable }" and 


[ngClass]="{ 'disabled': paletteClickable }"

如何使用Angular使用CSS禁用锚点？

3 个答案: