gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 02:04:06 25 4
gpt4 key购买 nike

我有以下 ionic 段 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 的情况下完成此操作。

我有以下事件,该事件正在 atm 正确触发:

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>

关于angular - 在 Angular 中操作/引用 DOM 元素的正确方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58506670/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com