Как получить значение из массива на основе выбора пользователя? - PullRequest
Новая
       25

Как получить значение из массива на основе выбора пользователя?

1 голос
/ 04 февраля 2020

Я следовал руководству по 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"]},
  ])

Вот код для опции выбора. Он отобразит группу параметров: groupName. 

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

Я не могу получить данные, используя {{this.timeZone.groupName}}.

Как я могу сделать, если я хочу получить groupName в зависимости от выбранного пользователя?

1 Ответ

1 голос
/ 04 февраля 2020

То, что у вас там, кажется правильным. Возможно, ошибка заключается в использовании mut, может быть, это где-то еще.

Помощник mut довольно расплывчатый. Это станет устаревшим, когда команда Ember выяснит, как это сделать изящно.

Вы можете избежать помощника mut, создав отдельное действие на вашем контроллере / компоненте.

Это будет позвольте вам отлаживать: просто вставьте оператор debugger в ваше действие и продолжайте оттуда.

Classi c Стиль 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>
...