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

Question

下面是用户可以单击的 5 个选项卡数组。我想禁用选项卡元素 2 和 3。这样选项卡名称是可见的，但用户不应该能够单击这些选项卡。我尝试在打字稿文件中将选项卡设置为 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>

Answer 1

您可以在 User_Tabs 数组中添加 isActive 标志，并为元素 2 和 3 传递 isActive 布尔值作为 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>

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

How to disable a tab element from array of tabs in Angular and Typescript

javascript

typescript

angular-template

angular