如何从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中，您可以使用[禁用]属性。

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