英文:
How to disable a tab element from array of tabs in Angular and Typescript
问题
以下是用户可以单击的5个标签数组。我想禁用标签元素2和3。因此，标签名称可见，但用户不应能够单击这些标签。
我尝试在typescript文件中将标签设置为active: false，但没有成功。我不确定该怎么做。
非常感谢任何帮助或建议。
TypeScript
public static User_Tabs: any[] = [
{ value: 'user_tab_one', viewValue: '用户1' },
{ value: 'user_tab_two', viewValue: '用户2' },
{ value: 'user_tab_three', viewValue: '用户3' },
{ value: 'user_tab_four', viewValue: '用户4' },
{ value: 'user_tab_five', viewValue: '用户5' }
];
HTML
<div class="user-tabs">
<ng-container *ngFor="let tab of userTabs">
<div class="filter" (click)="onTabSelect(tab.value)" [ngClass]="{'activeTab': tab.value === userTabType}">
{{ tab.viewValue }}
</div>
</ng-container>
</div>
英文:
Below is the 5 array of tabs that the user can click. I want to disable the tabs element 2 and 3. So that the tab name is visible but the user should not be able to click on those tab.
I have tried setting the tabs to active: false in the typescript file but that didn't work. I'm not sure on how to go about it.
Any help or suggestions would be greatly appreciated.
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>
</details>
# 答案1
**得分**: 1
你可以在你的 User_Tabs 数组中添加一个 isActive 标志，对于元素 2 和 3，将 isActive 的布尔值设为 false。
```typescript
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>
英文:
You can add isActive flag in your User_Tabs array & for element 2 and 3 pass isActive Boolean value as 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}
];
In Html, you can use [disabled] attribute.
<ng-container *ngFor = "let tab of userTabs">
<div class="filter" (click)="onTabSelect(tab.value)" [disabled]='!tab.isActive'>
{{tab.viewValue}}</div>
</ng-container>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论