电源选择不显示选定的值

Question

我的电源选择不会显示选定的值。

我在这个组件中有三个权力选择，两个工作正常，但第三个（公司类型）行事奇怪 - 当你第一次去表单时，这个值是空白的。当您选择它坚持从那么该记录上的值（直到您刷新页面）

模板：

// templates/components/companies/edit-new-form.hbs 
{{#bs-form formLayout=formLayout model=company onSubmit=(action "save") as |form|}} 
    <label>State: 
     {{#power-select 
     selected=company.state 
     options=states 
     onchange=(action "chooseState") 
     as |name| 
     }} 
     {{name}} 
     {{/power-select}} 
    </label> 

    <label>County: 
     {{#power-select 
     selected=company.county 
     options=countyNames 
     onchange=(action "chooseCounty") 
     as |name| 
     }} 
     {{name}} 
     {{/power-select}} 
    </label> 

    <label>Company Type: 
     {{#power-select class="select" 
     selected=company.companyType 
     options=companyTypes 
     onchange=(action "chooseCompanyType") 
     as |name| 
     }} 
     {{name.companyType}} 
     {{/power-select}} 
    </label> 
{{/bs-form}} 

JS：

// componnents/companies/edit-new-form.js 
export default Ember.Component.extend({ 
    company: null, 
    router: Ember.inject.service('-routing'), 
    ajax: Ember.inject.service(), 
    store: Ember.inject.service(), 

    countyNames: Ember.computed('company.state', function() { 
    return this.get('ajax').request(config.host + '/api/counties/' + this.company.get('state')).then((json) => json.map((county) => { 
     return county.countyName; 
    }) 
) 
}), 

    states: ['AK', 'AL', 'AR', 'AZ', 'CA', 'CO', 'CT', 'DC', 'DE', 'FL', 'GA', 'HI', 'IA', 'ID', 'IL', 'IN', 'KS', 'KY', 'LA', 'MA', 'MD', 'ME', 'MI', 'MN', 'MO', 'MS', 'MT', 'NC', 'ND', 'NE', 'NH', 'NJ', 'NM', 'NV', 'NY', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VA', 'VT', 'WA', 'WI', 'WV', 'WY'], 

    actions: { 
    // For dropdown handling 
    chooseState(state) { 
     this.set('company.state', state); 
     //Ember.set(this, "counties", this.get('ajax').request(config.host + '/api/counties/' + state).then((json) => json.items)); 
     //this.set('counties', this.get('ajax').request(config.host + '/api/counties/' + state).then((json) => json)); 
    }, 

    chooseCounty(countyName) { 
     this.set('company.county', countyName); 
    }, 

    chooseCompanyType(companyType) { 
     this.set('company.companyType', companyType); 
    }, 

    } 
}); 

这里是路线和型号挂钩：

// routes/companies/edit.js 
export default Ember.Route.extend({ 
    model(params) { 
    var store = this.store; 
    return Ember.RSVP.hash({ 
     companies: store.findRecord('company', params.company_id), 
     companyTypes: store.findAll('companyType') 
    }); 
    } 
}); 

是可以获得companyType模型的路线是：

// routes/company-types.js 
export default Ember.Route.extend({ 
    model() { 
    return this.get('store').findAll('company-type'); 
    } 
}); 

而且我的模型：

// models/company.js 
export default DS.Model.extend({ 
    companyName: DS.attr('string'), 
    street: DS.attr('string'), 
    county: DS.attr('string'), 
    city: DS.attr('string'), 
    state: DS.attr('string'), 
    zip: DS.attr('string'), 
    phone: DS.attr('string'), 
    email: DS.attr('string'), 
    fax: DS.attr('string'), 
    companyType: DS.attr('string') 
}); 

// models/company-type.js 
export default DS.Model.extend({ 
    companyType: DS.attr('string') 
}); 

看着灰烬检查器companyType的数据是存在的，是一个字符串，每次我的模型。当我从收存箱中选择一个值时，数据类型变为<svegbackend@model:company-type::ember1326:Environ Engineer。当我选择其他下拉列表中的一个时，该值保持一个字符串，我认为这是有道理的，因为这些字符串数组的来源。

那么如何让下拉菜单显示表单加载时的值？

Answer 1

问题是，company的companyType是字符串类型，其中第三个选项的选项列表的类型为companyType模型。这会在初始设置选定选项时产生不匹配。

限定第三电源选择如下：

{#power-select class="select" 
    selected=company.companyType 
    options=companyTypesOptions 
    onchange=(action "chooseCompanyType") 
    as |name| 
}} 
    {{name}} 
{{/power-select}} 

和内edit-new-form.js限定companyTypesOptions如下：

companyTypesOptions: Ember.computed('companyTypes.[]', function() { 
    return this.get('companyTypes').map((companyType)=> { 
     return Ember.get(companyType, 'companyType'); 
    }); 
}) 

通过这种方式;您将同时创建选项列表和字符串类型的选定值！不要忘记选项的类型和选择的选项是否不同;你会惹上麻烦！尽量避免这种情况！