动态更改占位符文本

Posted 2023-03-05

【中文标题】动态更改占位符文本

【英文标题】：Changing the placeholder text dynamically

【发布时间】：2020-11-28 12:29:38

【问题描述】：

我对 ion-input 的占位符有疑问。当没有选中任何内容以再次显示它时，我想在选中复选框时更改占位符。我的一些代码：

placeholderText = "Write something";
 <ion-input
          name="search"
          type="search"
          ngModel
          [placeholder]="placeholderText"
          #searchCtrl="ngModel"
       ></ion-input>

 dummyArray:  name: string; x: string; checked: boolean [] = [
    
      name: "a",
      x: "grg",
      checked: false,
    ,
    
      name: "b",
      phone: "ggg",
      checked: false,
    ,
].  This is a dummy date array of objects.
    <ion-list *ngFor="let dummy of dummyArray">
      <ion-label> dummy.name</ion-label>
      <ion-checkbox></ion-checkbox>
    </ion-list>

如果有人从复选框中选中以拥有一个空字符串占位符，并且如果没有人被选中以显示文本，我需要更改 placeholderText。

我怎样才能做到这一点，请帮助

谢谢

【问题讨论】：

我对 ion-inpt 不熟悉，但是如果你想在 js/html 中做这件事，这个小提琴可以帮助你：jsfiddle.net/asutosh/5wb9zgsj/7

【参考方案1】：

离子复选框有一个事件ionChange - 当被检查的财产发生变化时发出。每当复选框更改时，我们需要检查并更新占位符值。

将 placeHolder 创建为变量并在复选框更改时更新它

# Component HTML File
<ion-checkbox slot="end" [(ngModel)]="checkBoxValue" 
 (ionChange)="checkBoxChangeHandle($event)"></ion-checkbox>
<ion-input [placeholder]="dynamicPlaceholder"></ion-input>

# Component.ts
export class AppComponent implements OnInit 

  dynamicPlaceholder: string = "write Something"
  checkBoxValue:boolean = false
  constructor()
  ngOnInit()

  checkBoxChangeHandle(checkValue) 
     this.dynamicPlaceholder = checkValue ? "": "Write Something";
  

 

希望这有效..

【讨论】：

您好，感谢您在这里的回复。我尝试了代码，但它不起作用。我不知道为什么，但我认为事件功能并不完全好。它没有正确更改占位符..

只需检查发出的事件的值。控制台日志（检查值）。如果它返回你所做的。那么这是唯一的方法。

ty @Mohammed Ismail

快乐编码 ;)