将离子芯片包裹在 ion-item Ionic 4 中答案

【问题标题】：Wrap ionic chips within ion-item Ionic 4将离子芯片包裹在 ion-item Ionic 4 中
【发布时间】：2019-10-25 13:37:15
【问题描述】：

我有一个要求，我需要将离子芯片包裹在 ion-list 的 ion-item 中。

下面是它的代码。

<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%;
}

我用过自动换行，但还是不行。

我是不是哪里出错了？

【问题讨论】：

请问您能说出输出是什么或出了什么问题吗？你想要什么？
我只需要将离子芯片包装到 ion-item 中的下一行，上面的代码不会发生这种情况。
好的，所以把每个ion-chip 分开ion-item。
我想水平显示离子芯片，比如我有 5 个芯片，根据空间将两个芯片放在一行中，然后将剩余的芯片移到下一行。这就是我想要的。
离子网格将帮助您实现这一目标。尝试使用离子网格而不是ion-list。

标签： ionic-framework ionic4

【解决方案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

希望这会有所帮助。

【讨论】：

@coder12349 以上解决方案有效吗？如果是，请您接受此答案，以便其他人发现它有帮助。
这个解决方案不在ion-item内部工作，这是@coder12349所要求的。

【解决方案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 中为我解决了这个问题。 ?

【讨论】：