只有向下箭头用于 ION-SELECT 和 IONIC 4 中的文本框为空白答案

【问题标题】：Only down arrow coming for ION-SELECT and blank for textbox in IONIC 4只有向下箭头用于 ION-SELECT 和 IONIC 4 中的文本框为空白
【发布时间】：2019-11-07 23:37:25
【问题描述】：

在我的离子选择中，我得到了像小的向下箭头而不是完整的选择标签的输出，而输入标签只是一个空格。我可以输入数据，但 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-framework ionic4

【解决方案1】：

您似乎正在尝试将 Bootstrap 表单转换为 Ionic，并且您正在带来一些 jQuery 思维。

这是使用 Ionic 页面的方式：

page.html

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

page.ts

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() {
  }

}

注释

你不需要你上的所有课程。

使用标签position="stacked" 将其置于输入之上。

您不需要绑定#username 或id="username" 之类的名称。你所做的就是在它后面的页面上放一个变量，然后使用ngModel 绑定到它。对用户界面所做的任何更改（在框中键入、选择选项）都会自动设置为页面中的变量。由于[()] 语法，这可以双向工作，因此如果您在代码中将username 更改为this.username = "superman" 之类的内容，则页面上的输入框也会自动更新以匹配该值。

输入不需要type="text"，它是默认值。

您可以使用 placeholder 属性传递一些 SELECT 文本，而不是使用额外的选择选项。

【讨论】：