Хобрук: Ваш путь к мастерству в программировании

angular2 [innerHTML] не работает должным образом с ionic ‹ion-list›

Я использую ionic 3 и angular 2, и у меня возникла проблема с [innerHTML] стилем большой строки html. Хотя он отлично работает в отдельно стоящем теге div, он обрезает строку в конце экрана вместо перехода к следующей строке в теге ion-list. Любая идея, почему это происходит? Изображения и код ниже: В теге div. С тегом ion-list

Html-файл с тегом div

  <button (click)="this.getSchoolInfo(16329)" > Load string </button>
  <div [innerHTML] = "test"> </div>

Html-файл с тегом ion-list

<ion-list-header> Σχολές </ion-list-header>
<ion-item *ngFor="let i of schools" (click)="toggleDetails(i.school)">
  <b>{{i.school.title}}</b><br>


  <div class="info" *ngIf="i.school.showDetails" [innerHTML]="test"></div>

</ion-item>

Big string at .ts file

  this.test = "<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbgggggggggggggggggggggggggggggggggg</p>"
typescript ionic-framework angular html ionic3
04.09.2017

  • Вы пытались добавить пробелы внутри строки? 04.09.2017
  • Да. Это ничего не меняет prntscr.com/ggv8aq 04.09.2017
  • Я бы посоветовал вам проверить стили в chrome devtools и отключить их, пока вы не выясните, какой из них вызывает это, а затем отменить этот стиль из своего кода. 04.09.2017
  • Вероятно, ion-item имеет правило css text-overflow: hidden; или что-то в этом роде. 04.09.2017
  • Почему вы используете innerHTML, а не {{test}} или ionic, которые не могут это решить? 04.09.2017
  • @devqon уже пробовал это, но не работает... 04.09.2017
  • @MeMeMax с использованием {{test}} выведет строку со всеми тегами html (в моем случае ‹p›) в виде простого текста. 04.09.2017

Ответы:


1

Я думаю, что ваша проблема связана с классом text-wrap. Я тоже сталкиваюсь с этой проблемой. вот мой код. Вы можете быть изменены в соответствии с вашими потребностями.

синтаксис с **text-wrap**

<ion-list text-wrap *ngFor="let post of newsData">
<hr>
<ion-item (click)="NewsDetailsPage(post.news_id);" detail-push>

<ion-thumbnail item-start>
  <img [src]="post.news_photo">
</ion-thumbnail>
<h2>{{post.news_heading}}</h2>
<div><p style="float: left; font-weight: normal; font-size: 12px;"> {{post.news_location}}</p>
<p style="float: right; margin-top: 1%; font-weight: normal;  font-size: 12px;">{{post.news_date | date: 'dd/MM/yyyy' }}</p></div>

</ion-item>
</ion-list>

Вывод: введите здесь описание изображения

Без **text-wrap** вывод будет таким:

введите здесь описание изображения

Я надеюсь, что это поможет вам.

04.09.2017
Новые материалы
Понимание СТРУКТУРЫ ДАННЫХ И АЛГОРИТМА.
Что такое структуры данных и алгоритмы? Термин «структура данных» используется для описания того, как данные хранятся, а алгоритм используется для описания того, как данные сжимаются. И данные, и..
Как интегрировать модель машинного обучения на ios с помощью CoreMl
С выпуском новых функций, таких как CoreML, которые упростили преобразование модели машинного обучения в модель coreML. Доступная модель машинного обучения, которую можно преобразовать в модель..
Создание успешной организации по науке о данных
"Рабочие часы" Создание успешной организации по науке о данных Как создать эффективную группу по анализу данных! Введение Это обзорная статья о том, как создать эффективную группу по..
Технологии и проблемы будущей работы
Изучение преимуществ и недостатков технологий в образовании В быстро меняющемся мире технологии являются решающим фактором в формировании будущего работы. Многие отрасли уже были..
Игорь Минар из Google приедет на #ReactiveConf2017
Мы рады сообщить еще одну замечательную новость: один из самых востребованных спикеров приезжает в Братиславу на ReactiveConf 2017 ! Возможно, нет двух других кланов разработчиков с более..
Я собираюсь научить вас Python шаг за шагом
Привет, уважаемый энтузиаст Python! 👋 Готовы погрузиться в мир Python? Сегодня я приготовил для вас кое-что интересное, что сделает ваше путешествие более приятным, чем шарик мороженого в..
Альтернатива шаблону исходящих сообщений для архитектуры микросервисов
Познакомьтесь с двухэтапным сообщением В этой статье предлагается альтернативный шаблон для папки Исходящие : двухэтапное сообщение. Он основан не на очереди сообщений, а на..