下面是用户可以单击的 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/