ionic 4 ng-真值等价

Question

我正在将 ionic 1 应用程序重写为 ionic 4.5.0，我在 ionic 1 中有这样的计算器：

HTML:

    <ion-toggle toggle-class="toggle-positive" id="myid" ng-model="data.product1" ng-false-value="0" ng-true-value="50">{{data.product1}}
      <i class="icon ion-social-euro"></i>
    </ion-toggle>

ControllerJs：

$scope.data = {
    'product1' : 0,
    'product2' : 0,
    'product3' : 0
}

在 ionic 1 上，我们有如下指令：

ng-false-value="0" ng-true-value="50"

所以，当切换打开时，真值为 50，假值为 0。

在我的新应用中，我正在尝试做同样的事情：

HTML:

   <ion-item>
      <ion-label>Product 1 {{data.product1}}</ion-label>
      <ion-toggle name="product1" [(ngModel)]="data.product1"></ion-toggle>
    </ion-item>

ts

data: any = { 
    product1: 0, 
    product2: 0,
    product3: 0
};

{{data.product1}} is showing 0, but when i activate the toggle it's showing true or false

我找到了这个解决方案，但它适用于 angular：https://juristr.com/blog/2018/02/ng-true-value-directive/

ionic 4 中的 ng-true-value 和 ng-false-value 是否有等价物或其他东西？

Answer 1

一种方法是在切换更改值时使用 ionChange 事件 add/subtract 50。

在此示例中，我们传递数据对象的产品密钥和切换值。这样你就可以重用这个函数了。

<ion-item>
  <ion-label>Product 1 {{data.product1}}</ion-label>
  <ion-toggle name="product1" [(ngModel)]="toggle.product1" (ionChange)="toggleValues('product1', 50)"></ion-toggle>
</ion-item>

toggle = {
  'product1': false;
  // add more
}

toggle50Values(productKey: string, value: number) {
  if (this.toggle[productKey]) {   // toggle is true
    this.data[productKey] += value;
  } else {                         // toggle is false    
    this.data[productName] -= value;
  }
}

文档：Ion-toggle

Answer 2

正确的做法是：

HTML:

 <ion-item>
          <ion-label>Product1 {{data.product1}}</ion-label>
          <ion-toggle name="product1" [(ngModel)]="data.product1" (ionChange)="calculateProduct1()"></ion-toggle>
 </ion-item>

.ts

data: any = {
  product1: 0,
  product2: 0
}

calculateProduct1() {
  if (this.data.product1) {   // toggle is true
    this.data.product1 = 50;
  } else {                         // toggle is false    
    this.data.product1 = 0;
  }
}

感谢https://whosebug.com/users/1934484/tomas-vancoillie

ionic 4 ng-真值等价

ionic 4 ng-true-value equivalence

ionic4