Я пытаюсь создать ионный список, в котором каждая строка имеет следующие элементы слева направо
Миниатюра с изображением из URL-адреса ИЛИ и ионика с «буфером обмена» Маленькая текстовая строка Aнажимаемая кнопка / значок с изображением 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 завершен.В моем текущем значении это находится внутри кнопки, которая обрезает верхнюю и нижнюю часть значка.
