Изменение класса CSS компонента с помощью ngClass, если некоторые данные являются нулевыми или неопределенными

Question

В моем приложении есть несколько компонентов, таких как кнопки, поля с текстом и т. Д. c. Некоторые из них должны получить дополнительный класс CSS и отключиться, только если некоторые данные имеют нулевое значение или не определены. Я пытался сделать это, как показано ниже, но это не сработало. Есть ли лучший способ решить эту проблему?

В приведенном ниже примере возвращается ошибка «Невозможно прочитать свойство 'результат' неопределенного».

[ngClass]="{data.result.policyData === null ? '-disabled' : ''}"

Теперь в этом я получаю ошибку эта единственная строка может быть присоединена к ngClass.

[ngClass]="setDisabledClass()"

setDisabledClass() {
  let cssClass;
  this.checkResults.subscribe(data => {
    if (data.result.policyData === null) {
      cssClass = {
        '-disabled': true
      };
    } else {
      cssClass = {
        '-disabled': false
      };
    }
    return cssClass;
  });
}

Answer 1

Попробуйте также:

TS:

enableBtn: boolean = false;

ngOnInit() {
this.checkResults.subscribe(data => {
  if (data.result.policyData === null) {
    this.enableBtn = true;
  } else {
    this.enableBtn = false;
  }
});
}

HTML:

<button class="create-apply-btn" [ngClass]="setDisabledClass() ? 'create-apply-btn 
 active': 'create-apply-btn'" (click)="send()">Send</button>

Демо: https://stackblitz.com/edit/angular-sf-tooltip-issue-fix?file=src%2Fapp%2Fapp.component.ts

https://angular-sf-tooltip-issue-fix.stackblitz.io

Надеюсь, это поможет.

Answer 2

Вам поможет следующий пример:

HTML:

<button class="create-apply-btn active" (click)="enable()">Enable</button>
<button class="create-apply-btn active" (click)="disable()">Disable</button>
<br>
<h5>Result:</h5>
<button [ngClass]="enableSave() ? 'create-apply-btn active': 'create-apply-btn'" 
 (click)="send()">Send</button>

TS:

name = "Angular";
enableButton: boolean = false;

enableSave() {
 return this.enableButton;
}
enable() {
 this.enableButton = true;
}
disable() {
 this.enableButton = false;
}
send(){
 console.log('Button clicked and is enabled.')
}

CSS:

.create-apply-btn {
font-size: 14px;
border: initial;
background: #eaeaea;
color: #999999;
padding: 0px;
width: 100px;
margin: 0 4% 0;
text-align: center;
height: 42px;
pointer-events: none;
cursor: not-allowed;
}

.create-apply-btn.active {
background: #333;
color: #fff;
pointer-events: all;
cursor: pointer;
}

Пожалуйста, найдите пример демонстрации:

https://angular-sf-tooltip-issue-fix.stackblitz.io

https://stackblitz.com/edit/angular-sf-tooltip-issue-fix?file=src%2Fapp%2Fapp.component.ts

Надеюсь, этот пример поможет вы. Для вас есть некоторые логики c, которые можно реализовать, ссылаясь на этот пример.