Question

Am使用角离子框架开发移动应用程序。在此，我列出了一个循环分组的组件并在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： 在最后一行中，如果我按计划任务中的选项卡，则其显示整页，并在顶部显示作为计划任务的文本。我不明白这一点。有人可以澄清这一点吗？

ng中的离子输出裁剪底部用于离子网格和按钮

0 个答案: