Ionic framework 离子输入元件的宽度、高度为零

我是爱奥尼亚的新手，继承了我试图完成的未完成应用程序的代码库。当前表单对表单使用标准HTML标记，而不是ionic标记（例如，input而不是Ionion input）。下面是我为一个新表单构建的一些标准HTML，但是输入在浏览器中以0宽度和0高度呈现，因此它们实际上是不可编辑的。我是否犯了一个常见的错误？SCS中是否有需要设置的内容？蒂亚

<ion-view view-title="Add Card">
  <ion-content>
    <form>
      <div class="list">
      <ion-item>
        <ion-label fixed>Card Number</ion-label>
        <ion-input type="text" name="cardNumber" placeholder="#### #### #### ####"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label fixed>Exp. Date</ion-label>
        <ion-input type="text" name="expDate" placeholder="MM/YY"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label fixed>CVV</ion-label>
        <ion-input type="text" name="cvv" placeholder="MM/YY"></ion-input>
      </ion-item>
    </div>
    <button ion-button type="submit" block>Save Card</button>
  </form>
  </ion-content>
</ion-view>

卡号
出口日期
CVV
储蓄卡
无需使用
离子视图


HTML“

我在没有任何SCS和
元素的情况下运行你的代码，一切正常。你能上传你这边的图像吗？谢谢这个例子。我取出了ion视图，但它没有帮助。我还没有实际输入控制器代码。这会不会妨碍正确渲染？
<ion-header>
    <ion-navbar>
        <ion-title>Home</ion-title>
    </ion-navbar>
</ion-header>

<ion-content>
    <form [formGroup]="form" (ngSubmit)="callSubmit()">
        <div class="list">
            <ion-item>
                <ion-label fixed>Card Number</ion-label>
                <ion-input type="text" formControlName="cardNumber" placeholder="#### #### #### ####"></ion-input>
            </ion-item>
            <ion-item>
                <ion-label fixed>Exp. Date</ion-label>
                <ion-input type="text" formControlName="expDate" placeholder="MM/YY"></ion-input>
            </ion-item>

            <ion-item>
                <ion-label fixed>CVV</ion-label>
                <ion-input type="text" formControlName="cvv" placeholder="MM/YY"></ion-input>
            </ion-item>
        </div>
        <button ion-button type="submit" block>Save Card</button>
    </form>
</ion-content>

import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  form: FormGroup;

  constructor(public navCtrl: NavController, private fb: FormBuilder) {
    this.createForm();
  }

  createForm() {
    this.form = this.fb.group({
      cardNumber: null,
      expDate: null,
      cvv: null
    })
  }

  callSubmit() {
    console.log(this.form.value);
  }

}