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演示：https://stackblitz.com/edit/ionic-vscljq

希望这会有所帮助。

Answer 2

在Ionic 4中，要获取<ion-chip>项包装在<ion-item>内，您需要将它们放在<ion-label text-wrap class="ion-text-wrap">内。因此，在您的示例中，您将执行以下操作：

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

我遇到了同样的问题，将ion-chip包裹在ion-label内为我解决了这个问题。 ?

将离子芯片包裹在离子项目Ionic 4中

2 个答案: