Ионный активный сегмент не выделяется при многократном 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

не используйте ngModel. вместо этого попробуйте (ionChange), а затем вы можете предоставить значение по умолчанию значение, которое выбирает этот сегмент по умолчанию.

<ion-segment (ionChange)="categoryChanged($event)" value="chicken">
    <ion-segment-button *ngFor="let category of myCategories" value="{{category.catName}}">
        {{category.catName}}
    </ion-segment-button>
</ion-segment>

таким образом вы можете зафиксировать значение измененного сегмента

categoryChanged(value) {
console.log('segment is', value['detail']['value']);
}

Обновление : также приведенный выше фрагмент для ionic v4

Answer 2

Я решил это. Я думаю, что граница сегмента (линия под выбранным активным сегментом) находится за пределами его контейнера. Таким образом, когда у нас есть элемент под ним, граница покрывается этим контейнером.

Я добавил эту строку в свой order-menu.scss, чтобы проверить границу активного сегмента:

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

Теперь вы можете видеть, что нижняя граница не видна.

В качестве обходного пути я добавил класс в свой сегмент HTML и scss:

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

  .menuSegments{
    margin-bottom: 5px;
  }

Что приводит к этому:

Затем я удаляю класс .segment-button.segment-activated из моего scss, чтобы получить настройки по умолчанию от ionic для нижней границы.

Я сейчас использую "ionic-angular": "^3.9.2".

Я думаю, что ионная команда решила это в ionic 4. Эта проблема не возникает в ionic 4 (сегодня, 20 ноября 2018 г.).