Question

import Component from '@ember/component';

export default Component.extend({
  hello: true ,

  actions:{
    switch: function(hello){
      if (hello === false) {
        this.set(hello, true);
      } else if (hello === true) {
        this.set(hello, false);
      }  
    }
  }
});

我正在尝试在false和true选项之间切换，但这总是返回false。我需要它，以便它根据当前值在两者之间切换。我有一个运行此功能的按钮。最初，我希望它从true更改为false，然后如果再次单击将其更改为true等...

Answer 1

您的逻辑还可以，但是错误是您实际上没有设置hello属性。如所写，您的代码将在控制台中显示一个错误，这将提供一些线索。更正了下面的代码，请注意'hello'周围的引号：

import Component from '@ember/component';

export default Component.extend({
  hello: true ,

  actions:{
    switch: function(hello){
      if (hello === false){
        this.set('hello', true);
      } else if (hello === true){
        this.set('hello', false);
      }  
   }
})

在您的原始代码段中，您的操作的hello参数的值为“ true”。因此，您的代码说的是this.set(true, false)。 this.set方法期望将变量的名称作为字符串及其值接收。

此外，Ember组件具有一种称为toggleProperty的方法，在这里很有帮助：

import Component from '@ember/component';

export default Component.extend({
  hello: true ,

  actions:{
      switch() {
        this.toggleProperty('hello')
      }
    }
});

此问题的其他一些答案（尚未）说明是否需要使用this.set，这是Ember特定的变量可观察性要求。

此答案适用于Ember 1.13至至少3.x。对于小于3的Ember版本，import和export行会更改，仅此而已。

Answer 2

我假设您确实不需要开关函数的参数，而只需切换hello属性即可。如果是，则执行以下操作：

switch() { // here no parameter
  this.set('hello', !this.hello); // dont forget the '' for `this.set`.
}

Answer 3

首先，条件使用===，!==，==等。

第二，this.set('hello', !hello)不需要If条件或其他条件。

说明：

!是条件运算符。它检查条件是否为false，null或未定义。

但是您可以使用它在真假之间进行切换。

Answer 4

您可以尝试以下方法：

import Component from '@ember/component';

export default Component.extend({
  hello: true ,

  actions:{
      switch: (hello) => {
        this.set('hello', (hello ^= 1) == true)
      }
    }
});

或者这个：

import Component from '@ember/component';

export default Component.extend({
  hello: true ,

  actions:{
      switch: (hello) => this.set('hello', !hello)
    }
});

在真与假之间切换

4 个答案: