多个ngFor时未突出显示离子活动段

Question

我在使用离子段时遇到问题。我将动态值（ngFor）用于该段及其内容。问题在于，所选的活动细分没有突出显示。

在我的组件order-menu.ts中有一个简单的数组：

public myCategories = 
  [{
    catName: "Chicken",
  }, 
  {
    catName: "Beef",
  }];

public mySelCategory: string = "Chicken";

我想在离子应用程序中显示此细分。

这是我的模板，order-menu.html：

<ion-segment [(ngModel)]="mySelCategory">
    <ion-segment-button *ngFor="let category of myCategories" value="{{category.catName}}">
        {{category.catName}}
    </ion-segment-button>
</ion-segment>

<div [ngSwitch]="mySelCategory">
    <div *ngFor="let category of myCategories">
        <ion-list *ngSwitchCase="category.catName">
            <ion-item>
                {{category.catName}}
            </ion-item>
        </ion-list>
    </div>
</div>

我能够使用细分正确显示数据，但是不会突出显示活动细分。

我注意到，如果我不包括以下内容：

<div [ngSwitch]="mySelCategory">
    <div *ngFor="let category of myCategories">
        <ion-list *ngSwitchCase="category.catName">
            <ion-item>
                {{category.catName}}
            </ion-item>
        </ion-list>
    </div>
</div>

，活动段正确显示。

有人可以帮助解决此问题吗？或任何解决方法？非常感谢。

Answer 1

我解决了。我认为该段的边界（所选活动段下面的线）在其容器之外。因此，当我们在其下面有一个项目时，边框被该容器覆盖。

我在order-menu.scss中添加了此行以检查活动句段的边框：

  .segment-button.segment-activated{
    border: 2px dashed black !important;
  }

现在您可以看到底部边框不可见。

作为一种解决方法，我在细分HTML和scss中添加了一个类：

<ion-segment class="menuSegments" [(ngModel)]="mySelCategory">

  .menuSegments{
    margin-bottom: 5px;
  }

这将导致以下结果：

然后我从我的scss中删除.segment-button.segment-activated类，以从ionic获取底部边框的默认设置。

我当前正在使用"ionic-angular": "^3.9.2"。

我认为离子技术团队已经在离子4中解决了这个问题。离子4中不会发生此问题（到今天，2018年11月20日）。