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

希望这行得通..

动态更改占位符文本

1 个答案: