ion-intl-tel-input 默认国家/地区占位符问题

Question

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

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

这是我的参考代码：

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

mobile.page.ts

从 'ion-intl-tel-input' 导入 { IonIntlTelInputModule }；

@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);
    }
}

我得到的屏幕截图：

我期望达到的目标：

提前致谢..！

Answer 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;
    }
  }