ionicon存在于DOM中，但不可见（宽度为0px）

Question

我想显示一个箭头以返回到我的页面之一，因为我要进入该页面而不使用here中所述的来自app.component.ts的navCtrl。

因此，当我从app.component.ts进入此页面时，我正在将标志设置为true，并在模板中具有一个条件，该条件显示内部带有backArrow的col-1并单击以显示如果此标志设置为true，则显示另一个页面。但是此箭头永远不会显示。我在DOM中的开发人员控制台上检查并显示了col-1，但箭头的宽度为0。

以下是结果的屏幕：

这是我的标题：

<ion-header>
  <ion-navbar>
    <ion-row *ngIf="backArrow else elseBlock3">
        <ion-col col-1>
        <ion-buttons left>
          <button ion-button large (click)="goToChats()"><ion-icon name="arrow_back" style="font-size:32px;"></ion-icon></button>
        </ion-buttons>
      </ion-col>
        <ion-col col-10>
        <ion-title style="margin-left:30%;margin-top:-3.5%;">
          <img src="assets/imgs/masque.png" title="Masque Neemous" alt="Masque Neemous" style="margin-left: -2.5%;"><br />
          Chat
        </ion-title>
      </ion-col>
      <ion-col col-1>
        <ion-buttons right>
          <button ion-button large style="margin-left:-180%;margin-top:20%;" (click)="showMenu()"><ion-icon name="menu" style="font-size:32px;"></ion-icon></button>
        </ion-buttons>
      </ion-col>
    </ion-row>
    <ng-template #elseBlock3>
        <ion-row>
          <ion-col col-11>
            <ion-title style="margin-left:30%;margin-top:-3.5%;">
              <img src="assets/imgs/masque.png" title="Masque Neemous" alt="Masque Neemous" style="margin-left: -2.5%;"><br />
              Chat
            </ion-title>
          </ion-col>
          <ion-col col-1>
            <ion-buttons right>
              <button ion-button large style="margin-left:-180%;margin-top:20%;" (click)="showMenu()"><ion-icon name="menu" style="font-size:32px;"></ion-icon></button>
            </ion-buttons>
          </ion-col>
        </ion-row>
    </ng-template>
  </ion-navbar>
</ion-header>

我在互联网上搜索了几个小时，但没有找到任何相关的线索，我看不出是什么原因造成的。任何帮助将不胜感激。

感谢所有阅读/回答这篇文章的人。