angular2 [innerHTML]与离子<ion-list>无法正常工作

Question

我正在使用离子3和角度2，我遇到了一个问题，[innerHTML]设计了一个大的html字符串。虽然它在单独的div标签中正常工作，但它会在屏幕末端切断字符串而不是在离子列表标签中转到下一行。知道为什么会这样吗？ 图片和代码如下： Within a div tag。 Withing an ion-list tag

带有div标签的Html文件

RegistryView.Registry64

带有ion-list标签的Html文件   

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

.ts文件中的大字符串

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

Answer 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 **，输出就是：

  

我希望这会对你有所帮助。