Только стрелка вниз идет для ION-SELECT и пусто для текстового поля в IONIC 4

Question

В моем ионном выборе я получил вывод, как маленькая стрелка вниз, а не полный тег выбора, а для входного тега просто пробел. Я могу ввести данные, но интерфейс не выглядит хорошо. Есть ли какие-либо 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.

Вот как бы вы сделали это с помощью ионной страницы:

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 вместо дополнительной опции выбора.