Ionic framework 在IONIC 4中，只有向下箭头用于ION-SELECT，文本框为空

在我的ionic select中，我得到的输出像一个小的向下箭头，而不是一个完整的select标记，对于input标记，只有一个空格。我可以输入数据，但UI看起来不太好。是否有任何css我需要添加

 <ion-card class='sc-ion-card-md-h'>
      <ion-card-header>
        <ion-card-subtitle>Name:</ion-card-subtitle>
        <ion-card-title>
          <ion-select #inputName id="username" class="form-control">
            <ion-select-option>SELECT</ion-select-option>
            <ion-select-option>Monicka</ion-select-option>
            <ion-select-option>Hema</ion-select-option>
            <ion-select-option>Ramesh</ion-select-option>
            <ion-select-option>Madhavan</ion-select-option>
            <ion-select-option>Aadhavan</ion-select-option>
            <ion-select-option>Madhan</ion-select-option>
            <ion-select-option>Prasanth</ion-select-option>
          </ion-select>
        </ion-card-title>
      </ion-card-header>
      <ion-card-header>
        <ion-card-subtitle>Date:</ion-card-subtitle>
        <ion-card-title>
          <ion-input type="text" #inputDate id="date" class="form-control"></ion-input>
        </ion-card-title>
      </ion-card-header>
    </ion-card>

姓名：
挑选
莫尼卡
赫马
拉梅什
马达万
阿达万
马丹
普拉桑特
日期：

输出如下所示

---

您似乎正在尝试将引导表单转换为Ionic，同时还带来了一些jQuery思想

这是使用Ionic页面的方式：

page.html 笔记 你不需要上那么多课

使用label

position=“stacked”

将其置于输入上方

您不需要像

#username

或

id=“username”

那样绑定名称。您要做的是在它后面的页面上放置一个变量，然后使用

ngModel

绑定到它。对用户界面所做的任何更改（在框中键入，选择选项）都会自动设置为页面中的变量。由于

[（）]

语法，这两种方式都可以使用，因此如果在代码中使用类似

This.username=“superman”

的内容更改

用户名

，则页面上的输入框也会自动更新以匹配该值

您不需要输入

type=“text”

，这是默认设置

---

您可以使用

占位符

attrib来传递一些选择文本，而不必使用额外的选择选项。

您似乎正在尝试将引导表单转换为Ionic，同时也带来了一些jQuery思维

这是使用Ionic页面的方式：

page.html 笔记 你不需要上那么多课

使用label

position=“stacked”

将其置于输入上方

您不需要像

#username

或

id=“username”

那样绑定名称。您要做的是在它后面的页面上放置一个变量，然后使用

ngModel

绑定到它。对用户界面所做的任何更改（在框中键入，选择选项）都会自动设置为页面中的变量。由于

[（）]

语法，这两种方式都可以使用，因此如果在代码中使用类似

This.username=“superman”

的内容更改

用户名

，则页面上的输入框也会自动更新以匹配该值

您不需要输入

type=“text”

，这是默认设置

您可以使用

占位符

attrib来传递一些选择文本，而不是使用额外的选择选项

<ion-header>
  <ion-toolbar>
    <ion-title>card-select</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-list>
      <ion-item>
        <ion-label position="stacked">Name:</ion-label>
        <ion-select [(ngModel)]="username" placeholder="SELECT">
          <ion-select-option>Monicka</ion-select-option>
          <ion-select-option>Hema</ion-select-option>
          <ion-select-option>Ramesh</ion-select-option>
          <ion-select-option>Madhavan</ion-select-option>
          <ion-select-option>Aadhavan</ion-select-option>
          <ion-select-option>Madhan</ion-select-option>
          <ion-select-option>Prasanth</ion-select-option>
        </ion-select>
      </ion-item>
      <ion-item>
        <ion-label position="stacked">Date:</ion-label>
        <ion-input [(ngModel)]="date"></ion-input>
      </ion-item>
    </ion-list>
  </ion-card>
</ion-content>

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

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

  username: string;
  date: string;

  constructor() { }

  ngOnInit() {
  }

}