在Angular中操作/引用DOM元素的正确方法

我有以下离子段HTML代码：

<ion-segment (ionChange)="segmentChanged($event)" scrollable>
    <ion-segment-button checked value="calendar">
        <ion-icon name="calendar"></ion-icon>
    </ion-segment-button>
    <ion-segment-button  value="list-box">
        <ion-icon name="list-box"></ion-icon>
    </ion-segment-button>  
</ion-segment> 

<ion-card [hidden]="true">
    test
</ion-card>
<ion-card>
    test
</ion-card>

测试
测试

我想在按下“段”按钮时交换哪个卡可见。现在，我可以使用Jquery轻松地解决这个问题，但我想在没有Jquery的情况下解决这个问题

我有以下事件，正在正确触发：

segmentChanged（）：void{
console.log（“我已触发”）
}

---

实现此功能的最佳（或最佳）方法是什么？

您可以在组件中准备选项卡，在模板中使用for循环显示它们，并保存在当前选定的属性选项卡中。那么自动监视数据就不会有问题了

export interface Tab {
    code: string;
    name: string;
    icon: string;
}

...

// your component ts file
tabs: Tab[] = [
    {
        code: 'first',
        name: 'First tab',
        icon: 'first-icon',
    },
    {
        code: 'second',
        name: 'Second tab',
        icon: 'second-icon',
    },
];
currentTab: Tab = tabs[0];

segmentChanged(tab: Tab): void {
    this.currentTab = tab;
}


// template html file
<ion-segment scrollable>
    <ion-segment-button *ngFor="let tab of tabs" value="calendar" (click)="segmentChanged(tab)">
        <ion-icon [name]="tab.icon"></ion-icon>
    </ion-segment-button>
</ion-segment> 

<ion-card *ngFor="let tab of tabs">
    <ng-container *ngIf="tab.code === currentTab.code">
        {{ tab.name }}
    </ng-container>
</ion-card>

导出接口选项卡{
代码：字符串；
名称：字符串；
图标：字符串；
}
...
//您的组件是ts文件
制表符：制表符[]=[
{
代码：'第一'，
名称：“第一个选项卡”，
图标：“第一个图标”，
},
{
代码：'第二'，
名称：“第二个选项卡”，
图标：“第二个图标”，
},
];
当前选项卡：选项卡=选项卡[0]；
分段已更改（选项卡：选项卡）：无效{
this.currentTab=tab；
}
//模板html文件
{{tab.name}