离子卡没有移回网页的一侧

Question

我最近发布了几个问题，但没有答案。我开始怀疑我是否被列入黑名单或其他什么。我会用一个新问题再试一次。

我正在开发一个带有桌面视图的 Ionic 应用程序。我正在处理的初始页面不是卡片。它只有一个设置列表。但是，当您单击其中一个设置时，屏幕右侧会出现一张卡片，位于单独的列中。如果我减小窗口的大小，卡有时会低于设置列表。

问题是，当我再次增加屏幕尺寸甚至最大化它时，卡仍停留在设置列表下方。它应该再次出现在设置列表的一侧。不过不知道如何实现。

代码如下：

<ion-header>
  <ion-navbar>
    <ion-title></ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div>
    <ion-grid>
      <ion-row>
        <ion-col>
          <ion-list inset class="hovering">
            <ion-list-header><span class="settingsHeader">Settings</span> </ion-list-header>
            <button ion-item *ngFor="let item of items" (click)="itemTapped(item)" [ngClass]="{'highlightSelection': wasClicked}">
              <ion-icon name="create" item-left>
              </ion-icon>
              {{ item.label }}
            </button>  
          </ion-list>
        </ion-col>
        <ion-col *ngIf="this.addTable">
          <ion-list inset>
            <ion-list-header><span class="settingsHeader">{{ selectedItem.label }}</span>
              <button ion-button color="pm-yellow" (click)="addTapped($event, item)">Add</button>
              <button ion-button outline (click)="cancelTapped()">Cancel</button>
            </ion-list-header>
            <ion-card>
              <ion-card-content>
                <ngx-datatable #mydatatable class="ngx-datatable bootstrap material expandable" columnMode="flex" [headerHeight]="50" [footerHeight]="0" [rowHeight]="50" [scrollbarH]="false" [rowHeight]="50" [summaryRow]="false" [summaryPosition]="'bottom'" [loadingIndicator]="loading" [rows]="rows" [columns]="columns">
                  <div>
                    <ngx-datatable-column col-1 name="ID" [flexGrow]="1"></ngx-datatable-column>
                    <ngx-datatable-column col-2 name="Name" [flexGrow]="2">
                      <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">
                        <span *ngIf="editRow != rowIndex">
                            {{ value }}
                        </span>
                        <input type="text"
                          autofocus
                          (blur)="updateValue($event, 'name')"
                          *ngIf="editRow === rowIndex"
                          [value]="value"
                        />
                      </ng-template>
                    </ngx-datatable-column>
                    <ngx-datatable-column name="Edit" prop="Edit" [flexGrow]="1">
                      <ng-template let-column="column" let-sort="sortFn" ngx-datatable-header-template>
                        <span class="mobile-hidden"></span>
                      </ng-template>
                      <ng-template let-value="value" let-rowIndex="rowIndex" ngx-datatable-cell-template>
                        <span class="mobile-hidden button-spacing">
                          <button ion-button small *ngIf="editRow !== rowIndex" (click)="storeOldValues(rowIndex)">Edit</button>
                          <button ion-button small outline *ngIf="editRow !== rowIndex" (click)="deleteRow(rowIndex)">Delete</button>
                          <button ion-button small *ngIf="editRow === rowIndex" (click)="doneEditing(rowIndex, false)">Save</button>
                          <button ion-button outline small *ngIf="editRow === rowIndex" (click) = "doneEditing(rowIndex, true)">Cancel</button>
                        </span>
                      </ng-template>
                    </ngx-datatable-column>
                  </div>
                </ngx-datatable>
              </ion-card-content>
            </ion-card>
          </ion-list>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
</ion-content>

感谢任何帮助。

Answer 1

我会在调整窗口大小后尝试运行content.resize()，如下所示。

您可以通过设置窗口调整大小的事件处理程序来进行测试（下面未显示）。

import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

@Component({...})
export class MyPage{
 @ViewChild(Content) content: Content;

 callThisAfterReducingSizeOfWindow() {
   this.content.resize();
 }

}