动态更改占位符文本

Question

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

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，如果有人从复选框中选中以具有空字符串占位符，并且如果没有人被选中以显示文本。

如何实现，请帮忙

谢谢

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

希望这有效..

动态更改占位符文本

Changing the placeholder text dynamically

javascript

logic

placeholder

ionic-framework

angular