Javascript 使用NgIf在选项卡之间切换

我必须构建一个包含两个选项卡的组件，并使用简单的ngif在选项卡之间切换。

 我首先做的是： 


和HTML格式

<ion-segment value="active">
  <ion-segment-button value="active" (click)="onFirstTab()">
    <ion-label>Component</ion-label>
  </ion-segment-button>
  <ion-segment-button (click)="onSecondTab()">
    <ion-label>Attribute & Code</ion-label>
  </ion-segment-button>
</ion-segment>

<div *ngIf=“firstTab” class="animated">
Content 1
</div>
<div *ngIf=“secondTab” class="animated">
Content
</div>

组成部分
属性与代码
内容1
所容纳之物

它工作得很完美，但我担心的是，我发现它是一个重复的代码。我尝试了一种只使用一个变量在选项卡之间切换的方法。因为只有两个选项卡

问题是:

---

有没有一种方法可以在角度上构建一个更简单/更清晰的切换，以便在具有一个变量（开/关）的选项卡之间切换？

使用tabIndex就可以了

export class ButtonComponent {
 tabIndex = 0;


setActiveTab(index: number) {
    this.tabIndex = index;
}

<ion-segment value="active">
  <ion-segment-button
   *ngFor="let tabTitle of ['Component', 'Attribute & Code']; let i = index"
    [attr.value]="i === tabIndex  ? 'active' : ''"
    (click)="setActiveTab(i)"
  >
    <ion-label>{{ tabTitle }}</ion-label>
  </ion-segment-button>
</ion-segment>

 <div *ngIf=“tabIndex == 0” class="animated">
  Content 1
 </div>
 <div *ngIf=“tabIndex == 1” class="animated">
  Content
 </div>

导出类按钮组件{
tabIndex=0；
setActiveTab（索引：编号）{
this.tabIndex=索引；
}
{{tabTitle}}
内容1
所容纳之物

只需一个名为

activeTab

的属性和一个设置活动选项卡值的方法

setActiveTab（）

就可以这样做：

export class ButtonComponent {
  activeTab = 0;

setActiveTab(tabIndex: number) {
  this.activeTab = tabIndex;
}

在模板中：

<ion-segment value="active">
   <ion-segment-button value="active" (click)="setActiveTab(1)">
     <ion-label>Component</ion-label>
   </ion-segment-button>
   <ion-segment-button (click)="setActiveTab(2)">
     <ion-label>Attribute & Code</ion-label>
   </ion-segment-button>
</ion-segment>

<div *ngIf=“activeTab === 0” class="animated">Content 1</div>
<div *ngIf=“activeTab === 1” class="animated">Content</div>

组成部分
属性与代码
内容1
所容纳之物

---

这样，当您不断添加选项卡时，您不需要修改类，也不需要复制方法。

谢谢。这比我的方法简单得多，而且很有效！感谢您接受aswer。您认为添加ngFor更好：*ngFor=“let tabTitle of['Component'，Attribute&Code']；let i=index”我应该用它更新我的答案吗？是的，如果你认为有更好的解决方案，请更新答案。但与其将其作为第二版本添加，不如将其作为第二版本。我更新了我的答案，下一步可以使用RouterLink，而不是使用NGI显示内容。如果问题标题不明确，这是一个关于如何使用“if else”的基本问题在安格尔看来。

<ion-segment value="active">
   <ion-segment-button value="active" (click)="setActiveTab(1)">
     <ion-label>Component</ion-label>
   </ion-segment-button>
   <ion-segment-button (click)="setActiveTab(2)">
     <ion-label>Attribute & Code</ion-label>
   </ion-segment-button>
</ion-segment>

<div *ngIf=“activeTab === 0” class="animated">Content 1</div>
<div *ngIf=“activeTab === 1” class="animated">Content</div>