ionic-framework - 创建带有缩略图、按钮和可点击行的离子列表

Question

我正在尝试创建一个离子列表，其中每一行从左到右都有以下项目

带有来自 URL OR 的图像和带有“剪贴板”的 ionic 的缩略图 一个小文本字符串 带有 iso-information-circle-outline 图像的可点击按钮/图标（将用于显示弹出框 远处的右箭头侧面显示点击此行会将用户带到下一页

最初我让 ngFor 循环为每一行生成按钮，这使得最后的箭头出现，但停止了每行内的任何按钮，以便正确点击。

其他变体意味着按钮未与文本对齐，或者如果我在 {{survey.label}} 周围使用离子标签，则按钮完全消失。

 <ion-item *ngFor="let survey of surveys" (click)="openSurvey(survey)">
        <ion-thumbnail item-start>
            <img *ngIf="survey.icon" width="35" src="{{survey.icon}}"/>
            <ion-icon *ngIf="!survey.icon" name="clipboard"></ion-icon>
        </ion-thumbnail>
        {{survey.label}}
        <button (click)="showSurveyInfo($event, survey);$event.stopPropagation();" ion-button icon-only clear >
            <ion-icon name="ios-information-circle-outline"></ion-icon>
        </button>
        <button ion-button item-end icon-only clear>
            <ion-icon name="ios-arrow-forward"></ion-icon>
        </button>
    </ion-item>

这就是我想表达的方式，所有红色部分只是这个问题的注释。标题和我的垂直输入水平对齐。该行的下半部分有一个副标题，下面的文本停止，最好使用省略号（尽管可能超出此问题的范围），以便始终可见右箭头。还要注意，围绕 I 的圆圈是完整的。在我当前的标记中，它位于一个按钮内，并且将图标的顶部和底部剪掉。

标签： ionic-framework