Я создаю 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() {
  }

}
0
adamb 21 Авг 2018 в 14:06

3 ответа

Лучший ответ

Док

Должно быть:

<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"
2
Oleksandr Martyniuk 21 Авг 2018 в 11:11

Не используйте this. в html:

Использовать

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

ИЛИ

[class.disabled]="packageClickable"
0
לבני מלכה 21 Авг 2018 в 11:11

Вам нужно использовать [ngClass] вместо ngClass здесь, и вам это не нужно

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


[ngClass]="{ 'disabled': paletteClickable }"
0
crystalthinker 21 Авг 2018 в 11:11
51947315