ionic-framework - ngFor ion-grid & button 中的离子输出裁剪底部

Question

我正在使用 angular ionic 框架开发移动应用程序。在此，我在循环中列出了一个对组件进行分组并在 UI 中显示。但是视图没有显示整页。

我的视图页面

   <ion-grid *ngFor="let dart of darts;let index = index; trackBy:trackByIndex;" scope="row">
      <ion-row>
        <ion-col>
          From Time: <input type='text' class="form-control" name='from-{{index}}' [(ngModel)]="dart.fromTime" />
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          To Time: <input type='text' class="form-control" #toTime='ngModel' name='toTime-{{index}}'
            [(ngModel)]=dart.toTime />
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          Plan Task: <input type='text' class="form-control" #plannedTask='ngModel' name='plannedTask-{{index}}'
            [(ngModel)]=dart.plannedTask />
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          Remarks: <input type='text' class="form-control" #remarks='ngModel' name='remarks-{{index}}'
            [(ngModel)]=dart.remarks />
        </ion-col>
      </ion-row>
      <hr />
    </ion-grid>
    <div class="form-group">
      <button class="btn btn-primary" type='submit'>Add Day Plan</button>
    </div>
  </form>
</ion-content>

组件代码

  darts: Dart[] = [];

  ngOnInit() {
      const dart1 = new Dart('', '', '08:00 AM', '09:00 AM', '', '');
      const dart2 = new Dart('', '', '09:00 AM', '10:00 AM', '', '');
      const dart3 = new Dart('', '', '10:00 AM', '11:00 AM', '', '');
      const dart4 = new Dart('', '', '11:00 AM', '12:00 AM', '', '');
      const dart5 = new Dart('', '', '12:00 AM', '01:00 PM', '', '');
      const dart6 = new Dart('', '', '01:00 PM', '02:00 PM', '', '');
      const dart7 = new Dart('', '', '02:00 PM', '03:00 PM', '', '');
      const dart8 = new Dart('', '', '03:00 PM', '04:00 PM', '', '');
      const dart9 = new Dart('', '', '04:00 PM', '05:00 PM', '', '');
      const dart10 = new Dart('', '', '05:00 PM', '06:00 PM', '', '');
      const dart11 = new Dart('', '', '06:00 PM', '07:00 PM', '', '');

      this.darts.push(dart1);
      this.darts.push(dart2);
      this.darts.push(dart3);
      this.darts.push(dart4);
      this.darts.push(dart5);
      this.darts.push(dart6);
      this.darts.push(dart7);
      this.darts.push(dart8);
      this.darts.push(dart9);
      this.darts.push(dart10);
      this.darts.push(dart11);
  }
}

我得到的输出是

在输出中我无法查看我的操作按钮。有人可以帮我解决这个问题。

EDIT1： 在最后一行，如果我从计划任务中按选项卡，它会显示整页，并在顶部显示作为计划任务的文本。我不明白这一点。有人可以澄清这一点。

标签： ionic-framework