ion-picker組件示例（ionic4），這個組件有樣式錯亂的問題

Ionic4的官方文檔中關於ion-picker組件沒有給出相應的示例代碼，但是其右上角效果展示的地方下邊有一個github的示例代碼連接，這個代碼不是標准的ionic項目結構，但使用原理是一樣的，這里我修改成ionic項目的寫法：

HTML:

<ion-button expand="block" (click)="openPicker()">點擊</ion-button>

JavaScript:

import { Component, OnInit } from '@angular/core';
import { PickerController } from '@ionic/angular';

@Component({
  selector: 'app-edit',
  templateUrl: './edit.page.html',
  styleUrls: ['./edit.page.scss'],
})
export class EditPage implements OnInit {

  constructor(private pickerController: PickerController) { }

  ngOnInit() {
  }

  public async openPicker() {
    const picker = await this.pickerController.create({
      columns: this.getColumns(),
      buttons: [
        {
          text: '取消',
          role: 'cancel'
        },
        {
          text: '確定',
          handler: (value) => {
            console.log(`${value['col-0'].text}`);
          }
        }
      ]
    });

    await picker.present();
  }

  private getColumns() {
    // ion-pick 有個問題，create方法接收的參數中columns 不能直接給對象字面量，必須每次調用create時動態創建一個新對象，即時將這個對象保存為組件對象的屬性xxx，這里通過return this.xxx，這樣的方式也不行，會導致第二次打開時樣式不正常。
    return [
      {
        name: 'col-0',
        options: [
          {
            text: "選項1",
            value: 0
          },
          {
            text: "選項2",
            value: 1
          },
          {
            text: "選項3",
            value: 2
          }
        ]
      }
    ];
  }
}