动态更改占位符文本
Posted
技术标签:
【中文标题】动态更改占位符文本【英文标题】: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 快乐编码 ;)以上是关于动态更改占位符文本的主要内容,如果未能解决你的问题,请参考以下文章
使用 Javascript 动态更改 HTML5 输入元素的“占位符”属性