動態更改占位符文本

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

Ionic CheckBox 有一個事件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";
  }
}
 

希望這有效..