div和离子列表消除了对栅格的col-6效应。

Question

下面的代码运行良好。

.html

<ion-content class="content">
 <ion-grid no-padding>
   <ion-row class="row3">
   <ion-col col-6 *ngFor="let d of data">
     <presentation [data]="d"></presentation>
   </ion-col>
  </ion-row>
 </ion-grid>
</ion-content>

.scss

.content {
        ion-grid {
            height: 40%;
        }
        .row1 {
            flex: 1;
            padding: 5px 0 0 0;
            .searchbar {
                padding: 0 5px 5px 5px;
            }
        }
        .row2 {
            flex: 1;
        }
        .row3 {
            .col * {
                padding: 0 10px 10px 5px;
            }
            flex: 2;
        }
        img {
            width: 100%;
            height: 100%;
        }
        [col-1] {
            img {
                width: 100%;
                height: 30%;
            }
        }
    }

浏览器上的渲染

​

​

UI 1：

​

​

我像this.Only HTML代码一样修改了它，我刚刚介绍了这2行代码。

  <div [ngSwitch]="pet">
            <ion-list *ngSwitchCase="'kittens'">

.html

<ion-content class="content">
  <ion-grid no-padding>
 <ion-row class="row3">
      <div [ngSwitch]="pet">
        <ion-list *ngSwitchCase="'kittens'">
          <ion-col col-6 *ngFor="let d of data">
            <presentation [data]="d"></presentation>
          </ion-col>
        </ion-list>
      </div> 
    </ion-row>
  </ion-grid>
</ion-content>

现在呈现在浏览器上

​

​

UI 2：

​

​

你可以看到，现在没有col-6，effect.Can，你帮我把它恢复了吗？换句话说，与第一个用例相同。

当我用div替换它时，它显示为below.It制动器col-6 now.But，我需要2 columns.Any技巧？

 <ion-row class="row3">
      <div [ngSwitch]="pet">
        <div *ngSwitchCase="'kittens'">
          <div col-6 *ngFor="let d of data">
            <presentation [data]="d"></presentation>
          </div>
        </div>
      </div>
    </ion-row>

UI 3：

​

​

Answer 1

在我看来，我认为HTML元素嵌套(在ion-row和ion-col之间)存在一个问题。正因为如此，样式不能正确地应用于ion-col。

尝试按以下方式更改HTML：

<ion-row class="row3">
    <ion-col col-6 *ngFor="let d of data">
        <div [ngSwitch]="pet">
            <div *ngSwitchCase="'kittens'">
                <presentation [data]="d"></presentation>
            </div>
            <!-- other ngSwitchCases -->
        </div>
    </ion-col>
</ion-row>

干杯!