Оберните ионные чипы в ионный элемент Ionic 4

Question

У меня есть требование, когда мне нужно обернуть ионные чипы в ионный элемент списка ионов.

Ниже приведен код для него.

<ion-content>
    <ion-list>
        <ion-item *ngIf="showLayout" class="wrapname">
            <ion-chip color="danger" item-content>
                <ion-label >Secondary Label</ion-label>
                <ion-icon name="close"></ion-icon>
            </ion-chip>
            <ion-chip color="danger" item-content>
                <ion-label >Secondary Label</ion-label>
                <ion-icon name="close"></ion-icon>
            </ion-chip>
            <ion-chip color="danger" item-content>
                <ion-label >Secondary Label</ion-label>
                <ion-icon name="close"></ion-icon>
            </ion-chip>
        </ion-item>
    </ion-list>
</ion-content>

Ниже приведен код scss для него.

.wrapname{
    word-wrap: break-word;
    white-space: pre-wrap;
    width:100%;
}

Я использовал перенос слов, но он все еще не работает.

Я что-то не так делаю ??

Answer 1

Вы можете просто достичь этого с помощью *ngFor

Проверьте код ниже:

.ts:

 items = ["Test","Test1","Test12","Test123", "Test1234", "Test12345", "Test123456", "Test1234567", "Test123456", "Test12345", "Test1234", "Test123", "Test12", "Test1", "Test"];

.html:

<ion-content padding>
    <ion-chip *ngFor="let item of items;" color="danger" item-content style="margin-left: 10px;">
        <ion-label > {{ item }}</ion-label>
        <ion-icon name="close"></ion-icon>
    </ion-chip>
</ion-content>

Создает список фишек, как показано ниже:

StackBiz Demo:https://stackblitz.com/edit/ionic-vscljq

Надеюсь, это поможет.