Ionic 6.20.1 的 ion-intl-tel-input 默认国家/地区占位符问题答案

【问题标题】：ion-intl-tel-input default country placeholder issue with Ionic 6.20.1Ionic 6.20.1 的 ion-intl-tel-input 默认国家/地区占位符问题
【发布时间】：2023-01-31 13:28:49
【问题描述】：

我已经成功安装并配置了插件 - 来自 <https://github.com/azzamasghar1/ion-intl-tel-input> 的“ion-intl-tel-input”，工作正常。但我需要将默认国家/地区的选择框占位符从“国家/地区”重置为空白标志作为其中的占位符。我为此花了大约 1 周的时间，但没有任何成果。

（笔记）：我不想第一次实现默认的“[defaultCountryiso]”或第一个“[selectFirstCountry]”国家选择。它应该是为用户打开的手动选择选项。

这是我的参考代码：

手机.page.html

     <ion-intl-tel-input class="lastnamefilter-new color"                
        required
        id="countrycode" 
        name="countrycode" 
        [(ngModel)]="countrycode"
        #phoneControl="ngModel"
        (ionChange)="showCountryName($event)" 
        [defaultCountryiso]="defaultCountryIsoTest"
        [dialCodePrefix]= "dialCodePrefix"
        [enableAutoCountrySelect]="enableAutoCountrySelect"
        [enablePlaceholder]="enablePlaceholder"
        [fallbackPlaceholder]="fallbackPlaceholder"
        [inputPlaceholder]="inputPlaceholder"
        [minLength]= "minLength"
        [modalTitle]="modalTitle"
        [modalCssClass]="modalCssClass"
        [modalSearchPlaceholder]="modalSearchPlaceholder"
        [modalCloseText]="modalCloseText"
        [modalCloseButtonSlot]= "modalCloseButtonSlot"
        [modalCanSearch]="modalCanSearch"
        [modalShouldBackdropClose]="modalShouldBackdropClose"
        [modalShouldFocusSearchbar]="modalShouldFocusSearchbar"
        [modalSearchFailText]="modalSearchFailText"
        [onlyCountries]= "onlyCountries"
        [preferredCountries]="preferredCountries"
        [selectFirstCountry]="selectFirstCountry"
        [separateDialCode]="separateDialCode"
      >
      </ion-intl-tel-input>

手机.page.ts

  import { IonIntlTelInputModule } from 'ion-intl-tel-input';

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

    countrycode = {
      isoCode: '',
      dialCode: '',
      internationalNumber: '',
      nationalNumber: ''
    };
    
    country_code: any;
    defaultCountryIsoTest = '';
    dialCodePrefix = '+';
    enableAutoCountrySelect = true;
    enablePlaceholder = true;
    fallbackPlaceholder = '';
    inputPlaceholder = 'Enter Mobile Number';
    minLength = '8';
    modalTitle = 'Select Country';
    modalCssClass = '';
    modalSearchPlaceholder = 'Enter country name';
    modalCloseText = 'Close';
    modalCloseButtonSlot = 'end';
    modalCanSearch = true;
    modalShouldBackdropClose = true;
    modalShouldFocusSearchbar = true;
    modalSearchFailText = 'No countries found.';
    onlyCountries = [];
    preferredCountries = ['in', 'sg'];
    selectFirstCountry = false;
    separateDialCode = false;
    disableTest = false;

   constructor(private ionIntlTelInputModule:IonIntlTelInputModule ) {}

   showCountryName(obj) {
     console.log(this.countrycode, obj);
   }
 }

我得到的截图：

我期望实现的目标：

提前致谢..！

【问题讨论】：

标签： typescript ionic-framework cordova-plugins ionic6 intl-tel-input

【解决方案1】：

在我的高级开发人员的指导下，简单地使用 CSS 获得了解决方案。

这里是：

   ion-intl-tel-input {
    ::ng-deep .ionic-selectable-has-placeholder div.ionic-selectable-value-item 
    {
      content: "";
      display: inline-block;
      width: 23px;
      background-color: var(--placeholder-color, #999);
      height: 18px;
      font-size: 0px;
    }
  }

【讨论】：