离子输入元素的宽度、高度为零

Question

我是 ionic 新手，并且继承了我正在尝试完成的未完成应用程序的代码库。当前的表单对表单使用标准 HTML 标记而不是离子标记（例如，输入而不是离子输入）。下面是我为新表单构建的一些标准 HTML，但输入在浏览器中呈现为 0 宽度和 0 高度，因此它们实际上不可编辑。我犯了一个常见的错误吗？ scss中有什么需要设置的吗？ TIA。

<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>

Answer 1

不用ion-view

Example

HTML"

<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>

TS：

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);
  }

}