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

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

最初我有每行的ngFor循环生成按钮,并且在最后显示箭头,但是停止了每行内的任何按钮以便正确点击 .

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

<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>

这就是我想要解决的问题,所有红色部分都只是这个问题的注释 . Headers 和我的垂直进入水平对齐 . 在行的下半部分有一个副 Headers ,下面的文本停止,最好有一个省略号(尽管可能超出了这个问题的范围),因此右箭头始终可见 . 还要注意我周围的圆圈是完整的 . 在我当前的标记中,它位于一个按钮内,可以将图标的顶部和底部剪切掉 .