Question

我希望你一切都好。

我很挣扎，我不知道该如何解决，如果您有时间的话，我将不胜感激。

我正在尝试在选项卡中动态更改离子图标，因此基本上每个图标都有svg和svg。我尝试了一些方法，但是它没有真正起作用，有人可以给我提示或告诉我该怎么办吗？

某些代码：

ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button
      [tab]="icons.name"
      class="sundayActivated"
      *ngFor=" let icons of tabsArray"
    >
      <ion-icon
        *ngIf="icons.name === sunday"
        [src]="icons.iconActive"
        (click)="toggleTabs()"
      ></ion-icon>

tabsArray = [
    {
      name: "sunday",
      iconActive: "./../../assets/icon/tabs/xactive.svg",
      iconInactive: "../../../assets/icon/tabs/xinactive.svg",
    },
    {
      name: "monday",
      iconActive: "../../../assets/icon/tabs/yinactive.svg",
      iconInactive: "../../../assets/icon/tabs/yactive.svg",
    },
  ];

 toggleTabs() {
    this.tabsArray.find((tab) => {
      if (tab.name === "sunday") {
        tab.iconActive = "../../../assets/icon/tabs/xactive.svg";
        tab.iconInactive = "../../../assets/icon/tabs/yinactive.svg";
      }

      if (tab.name === "monday") {
        tab.iconActive = "../../../assets/icon/tabs/yactive.svg";
        tab.iconActive = "../../../assets/icon/tabs/xinactive.svg";
      }
      console.log(tab);
    });
  }

我可以看到带有此代码的图标，但是当我更改选项卡时，图标不会更改。有人可以帮忙吗？非常感谢

Answer 1

您的icons标记的* ngIf出现问题，您正在检查字符串是否没有引号。

请尝试以下操作。

<ion-icon
        *ngIf="icons.name === 'sunday'"
        [src]="icons.iconActive"
        (click)="toggleTabs()"
      ></ion-icon>

离子动态显示标签图标的角度

1 个答案: