文章/答案/技术大牛

发布

社区首页 >问答首页 >如何根据用户选择从数组中获取值？

问如何根据用户选择从数组中获取值？
EN

Stack Overflow用户

提问于 2020-02-04 10:05:17

回答 1查看 54关注 0票数 1

我已经按照ember-paper指南定义了选项数据，如下所示。用户可以从选项中选择任何国家/地区。

  timeZoneOptions: Object.freeze([
    { groupName: "Asia", options:["Kabul","Yerevan","Baku","Dhaka","Brunei","Bangkok","Shanghai","Urumqi","Taipei","Macau","Tbilisi","Dili","Kolkata","Jakarta"]},
    { groupName: "Australia", options: ["Darwin", "Eucla", "Perth", "Brisbane","Lindeman","Adelaide","Hobbart","Currie","Melbourne"]},
  ])

以下是select选项的代码。它将显示按groupName分组的选项。

{{#paper-select options=this.timeZoneOptions
        selected=this.timeZone
        onChange=(action (mut this.timeZone)) as |timeZon| }}
        {{timeZon}}
      {{/paper-select}}

我无法使用{{this.timeZone.groupName}}获取数据。

如果我想根据用户选择的选项获得groupName，我该怎么做？

ember.js

ember-paper

回答 1

Stack Overflow用户

发布于 2020-02-04 16:23:48

你在那里得到的似乎是正确的。也许错误出在mut的用法上，也可能出在别的地方。

mut帮助器相当模糊。当Ember团队想出如何优雅地做它时，它将被弃用。

您可以通过在控制器/组件上创建不同的操作来避免mut帮助器。

这将使您能够进行调试:只需将一条debugger语句放入您的操作中，然后从那里继续进行。

经典的Ember风格：

import Component from '@ember/component';

export default Component.extend({
  timeZoneOptions: Object.freeze([
    { groupName: "Asia", options:["Kabul","Yerevan","Baku","Dhaka","Brunei","Bangkok","Shanghai","Urumqi","Taipei","Macau","Tbilisi","Dili","Kolkata","Jakarta"]},
    { groupName: "Australia", options: ["Darwin", "Eucla", "Perth", "Brisbane","Lindeman","Adelaide","Hobbart","Currie","Melbourne"]},
  ]),

  currentTimeZoneOption: null,

  actions: {
    selectTimeZoneOption(timeZoneOption) {
      this.set('currentTimeZoneOption', timeZoneOption');
    }
  }
});

{{#paper-select
  options=this.timeZoneOptions
  selected=this.currentTimeZoneOption
  onChange=(action 'selectTimeZoneOption')
  as |timeZoneOption|
}}
  {{timeZoneOption}}
{{/paper-select}}

<p>
  Current timezone option:
  {{this.currentTimeZoneOption.groupName}}
</p>

Ember Octane风格：

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class MyComponent extends Component {
  timeZoneOptions = Object.freeze([
    { groupName: "Asia", options:["Kabul","Yerevan","Baku","Dhaka","Brunei","Bangkok","Shanghai","Urumqi","Taipei","Macau","Tbilisi","Dili","Kolkata","Jakarta"]},
    { groupName: "Australia", options: ["Darwin", "Eucla", "Perth", "Brisbane","Lindeman","Adelaide","Hobbart","Currie","Melbourne"]},
  ]);

  @tracked
  currentTimeZoneOption = null;

  @action
  selectTimeZoneOption(timeZoneOption) {
    this.currentTimeZoneOption = timeZoneOption;
  }
}

<div class="my-component">
  <PaperSelect
    @options={{this.timeZoneOptions}}
    @selected={{this.currentTimeZoneOption}}
    @onChange={{this.selectTimeZoneOption}}
    as |timeZoneOption|
  >
    {{timeZoneOption}}
  </PaperSelect>

  <p>
    Current timezone option:
    {{this.currentTimeZoneOption.groupName}}
  </p>
</div>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60049608

复制

相似问题

问如何根据用户选择从数组中获取值？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何根据用户选择从数组中获取值？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何根据用户选择从数组中获取值？
EN