动态更改占位符文本

Question

我对 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。

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

谢谢

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

希望这有效..