javascript - 如何从 Angular 和 Typescript 中的选项卡数组中禁用选项卡元素

标签 javascript angular typescript angular-template

下面是用户可以单击的 5 个选项卡数组。我想禁用选项卡元素 2 和 3。这样选项卡名称是可见的,但用户不应该能够单击这些选项卡。 我尝试在 typescript 文件中将选项卡设置为 active: false 但这没有用。我不确定如何去做。 任何帮助或建议将不胜感激。

typescript

public static User_Tabs: any [
{ value: 'user_tab_one', viewValue: 'User 1'}, 
{ value: 'user_tab_two', viewValue: 'User 2'}, 
{ value: 'user_tab_three', viewValue: 'User 3'}, 
{ value: 'user_tab_four', viewValue: 'User 4'},
{ value: 'user_tab_five', viewValue: 'User 5'}];

HTML

<div class= "user-tabs">
<ng-container *ngFor = "let tab of userTabs">
<div class="filter" (click)="onTabSelect(tab.value)" 
[ng-class]="{'activeTab': tab.value === userTabType}">
{{tab.viewValue}}</div>
</ng-container>
</div>

最佳答案

您可以在 User_Tables 数组中添加 isActive 标志,并为元素 2 和 3 传递 isActive bool 值作为 false

public static User_Tabs: any [
  { value: 'user_tab_one', viewValue: 'User 1', isActive :true}, 
  { value: 'user_tab_two', viewValue: 'User 2', isActive :false}, 
  { value: 'user_tab_three', viewValue: 'User 3', isActive :false}, 
  { value: 'user_tab_four', viewValue: 'User 4', isActive :true},
  { value: 'user_tab_five', viewValue: 'User 5', isActive :true}
];

在Html 中,可以使用[disabled] 属性。

<ng-container *ngFor = "let tab of userTabs">
  <div class="filter" (click)="onTabSelect(tab.value)" [disabled]='!tab.isActive'>
  {{tab.viewValue}}</div>
</ng-container>

关于javascript - 如何从 Angular 和 Typescript 中的选项卡数组中禁用选项卡元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59573491/

相关文章:

angular - 直接访问 FormControl 元素而不是使用 form.get

typescript - 向剩余运算符添加输入

javascript - 无法访问 flowplayer api

javascript - 如何在html5中使用javascript从页面加载的查询字符串中获取值

angular - HttpClientInMemoryWebApiModule.forRoot 中的 dataEncapsulation 选项是什么?

css - 如何在 Angular 中将类样式从父级传递给子级,并在特定元素中使用它

typescript - 如何在 typescript 中组合对象属性?

javascript - TypeScript isNaN 只接受一个数字

javascript - 使用 jquery 的 slider 分页

javascript - 选择具有相同类名的多个标签?