只有 ION-SELECT 的向下箭头和 IONIC 4 中文本框的空白

Question

在我的 ionic select 中，我得到的输出像小向下箭头而不是完整的 select 标签，而输入标签只是一个空白 space。我可以输入数据，但 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>

输出看起来像这样...

Answer 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 绑定到它。对用户界面所做的任何更改（在框中键入，selecting 选项）都会自动设置为页面中的变量。由于 [()] 语法，这两种方式都有效，因此如果您在代码中将 username 更改为 this.username = "superman" 之类的内容，则页面上的输入框也会自动更新以匹配该值.

您不需要 type="text" 输入，这是默认设置。

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

只有 ION-SELECT 的向下箭头和 IONIC 4 中文本框的空白

Only down arrow coming for ION-SELECT and blank for textbox in IONIC 4

ionic-framework

ionic4

page.html

page.ts

笔记