Ionic 5 - Несколько элементов в ионном элементе, разделяющем одну и ту же строку

Я переношу проект с версии 3.2 на версию 5.4 Ionic и столкнулся с проблемой: когда я помещаю некоторые элементы в ion-элемент, они делят строку на столбцы вместо перехода к следующей строке.

  <ion-list *ngFor="let ent of ents">
    <ion-item class="item-text-wrap" (click)="selEnt(ent)">
      <h2>{{ ent.nome }}</h2>
      <h3>{{ ent.cidade }} - {{ ent.uf }}</h3>
      <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
    </ion-item>
  </ion-list>

Ожидаемый результат был

xxxxxxxxxx
yyyyyyyy - zz

И результат был

xxxxxxxxxx yyyyyyyy - zz

Я пытался использовать br/, ion-label и другие рекурсии для разрыва строки, но безуспешно.

Как это исправить?


ionic-framework angular ionic5
person Murilo    schedule 12.05.2020    source источник
comment
как насчет того, чтобы сделать ваш ion-item гибким контейнером, а не гибкой оберткой, и сделать ширину вашего h2 равной 100%   -  person brijmcq    schedule 12.05.2020
comment
Как это сделать?   -  person Murilo    schedule 12.05.2020
comment
я просто думаю об этом на моей голове. Вы можете создать демонстрацию stackblitz, чтобы я мог изменить это там?   -  person brijmcq    schedule 12.05.2020
comment
brijmcq, [stackblitz.com/edit/ionic-list-item5] вам посмотрите, как я хочу, чтобы макет был. В StackBlitz ошибка в макете не возникает   -  person Murilo    schedule 12.05.2020

Ответы (2)


arrow_upward
0
arrow_downward

вы хотите несколько элементов в одном списке? затем переместите свой ngFor в ion-item

       <ion-list>
        <ion-item class="item-text-wrap" (click)="selEnt(ent)" *ngFor="let ent of ents">
          <ion-label>
            <h2>{{ ent.nome }}</h2>
            <h3>{{ ent.cidade }} - {{ ent.uf }}</h3>
            <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
          </ion-label>    
        </ion-item>
      </ion-list>
person sickpig    schedule 12.05.2020
comment
Тот же результат, больной поросенок! - person Murilo; 12.05.2020
comment
это странно. но я рад, что вы сами нашли решение, обернув его в ion-label :) но вы действительно хотите иметь несколько списков вместо нескольких элементов в одном списке? предлагаю поставить ngFor на ion-item - person sickpig; 13.05.2020

arrow_upward
0
arrow_downward

Я нашел ответ, просто

  <ion-list>
    <ion-item class="item-text-wrap" (click)="selEnt(ent)" *ngFor="let ent of ents">
      <ion-label>
        <h2>{{ ent.nome }}</h2>
        <h3>{{ ent.cidade }} - {{ ent.uf }}</h3>
        <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
      </ion-label>
    </ion-item>
  </ion-list>
person Murilo    schedule 13.05.2020