在Angular中将多个值添加到禁用属性

Question

我正在尝试将值添加到已禁用指令中。因此，如果您看下面的代码，则在值匹配System Admin的情况下，我将禁用按钮。我现在正试图为此添加更多的价值。因此，我想为此添加System Admin和HR Manager。

[disabled]="userRole === 'System Admin'"

我尝试了这个，但是似乎没有用

[disabled]="userRole === 'System Admin' || 'HR Manager'"

Answer 1

如果要检查的条件很多，那么最好写一个返回true或false的函数：

HTML ：

[disabled]="isDisabled(userRole)"

打字稿：

isDisabled(userRole:string):boolean {
  if(userRole == "System Admin" || userRole == "HR Manager") {
    return true
  }
  return false
} 

Answer 2

您可以尝试这样。

[disabled]="(userRole === 'System Admin' || userRole === 'HR Manager') ? true : false"

Answer 3

原因是：

userRole === 'System Admin' || 'HR Manager'

表示

if (userRole === 'System Admin') return true;
else return 'HR Manager';

因此您可以使用此：

['System Admin','HR Manager'].indexOf(userRole) !== -1

Answer 4

如果是字符串（据我所知），则不能将一个事物与多个事物进行比较，因此需要修改条件：

[disabled]="userRole === 'System Admin' || userRole === 'HR Manager'"

“自定义”功能禁用该控件的问题，它多次调用（即使您单击该控件也会被调用）：

因此，如果只有两个值要比较，那么我将使用HTML代码方法

Stackblitz_Demo