时间戳

首页 > 解决方案 > 你能在离子选择中触发方法吗，就像你会触发一样 (click)="method()"

angular - 你能在离子选择中触发方法吗，就像你会触发一样 (click)="method()"

问题描述

所以我在离子选择方面遇到了一些问题。我已经尝试了几个小时来尝试让各种事情发挥作用。基本上，我有一个 WordPress 帖子列表。我希望用户能够选择在离子选择中查看多少列。我已经用按钮很好地实现了这一点，但是，为了获得更多的选项，我想使用离子选择。

我尝试了多个教程，但并不完全理解。我曾尝试使用 ionChange 但无济于事。

HTML - 正如我所提到的，我的按钮工作得很好，所以我相信更新 NgClass 的基本方法工作得很好。

    <ion-item>
      <ion-label>Columns</ion-label>
      <ion-select #columnCount (ionChange)="onChange($event)" placeholder=" Select One">
        <ion-select-option [value]="applyOneCol()">One</ion-select-option>
        <ion-select-option [value]="applyTwoCol()">Two</ion-select-option>
      </ion-select>
    </ion-item>


    <div text-center class="col-buttons">
      <ion-button (click)="applyTwoCol()">Two Columns</ion-button>
      <ion-button (click)="applyOneCol()">One Column</ion-button>
    </div>




 <ion-row class="row">
      <ion-col [ngClass]="getCurrentColCount()" ngDefaultControl no-padding *ngFor=" let post of posts">

TS - 这些对于按钮上的单击事件非常有效，但我无法在离子选择中获得相同的功能。


  public currentColCount = 'one-col';


  applyOneCol() {
    this.currentColCount = 'one-col';
    console.log(this.currentColCount);
  }

  applyTwoCol() {
    this.currentColCount = 'two-col';
    console.log(this.currentColCount);
  }

  getCurrentColCount() {
    return this.currentColCount;
  }

  onChange() {
    console.log(this.currentColCount);
  }

我相信它非常简单，但我之前曾尝试使用离子选择，但最终放弃了按钮，但这次我别无选择，只能让离子选择工作。我认为这就像触发每个选项的方法一样简单，但我什至无法让它工作。

（我的离子选择代码是我尝试过的各种东西的总混搭，我只是迷路了，所以看起来有点奇怪）

谢谢

标签： angularionic-framework

解决方案

好的首先你应该使用ngModel，并修改代码如下

<ion-item>
  <ion-label>Columns</ion-label>
  <ion-select #columnCount (ionChange)="onChange()" [(ngModel)]=selectedcol' placeholder=" Select One">
    <ion-select-option [value]="one-col'">One</ion-select-option>
    <ion-select-option [value]="two-col'">Two</ion-select-option>
  </ion-select>
</ion-item>

onChange()
{
this.currentColcount = this.selectedcol
}

这样，ngmodel（即 selcedcol ）将保留所选选项，您可以轻松地将其分配给 currentColcount

您仍然可以消除该功能，但以上是最基本的

推荐阅读