Question

我试图找出一种仅在第一个放大器清单具有选定值时才将数据加载到第二个放大器清单中的方法，我也找不到一种方法来显示第二个放大器清单占位符上。

<div class="row">
    <div class="col-sm-4 position-inherit">
        <div class="form-group tt-dark select-site">
            <amp-state id="states" src="/BuscaEstadosAmpRequest?isLead=true&isTeste=false&isMapa=false"></amp-state>

            <amp-list layout="fixed-height"
                height="40"
                src="/BuscaEstadosAmpRequest?isLead=true&isTeste=false&isMapa=false"
                single-item
                items="."
                noloading
                binding="no">
                <template type="amp-mustache">
                    <select id="stateGeo" on="change:
                            AMP.setState({
                                selectedState: states.items.filter(x => x.ID == event.value)[0]
                            }); cities.refresh">
                        <option value="" [disabled]="selectedState">UF</option>

                        {{#items}}
                        <option value="{{ID}}">{{Sigla}}</option>
                        {{/items}}
                    </select>
                </template>
            </amp-list>
        </div>
    </div>

    <div class="col-sm-8">
        <div class="form-group tt-dark select-site">
            <amp-state id="cities"
                [src]="'/BuscaCidadesAmpRequest?isLead=true&isTeste=false&isMapa=false&estadoId=' + selectedState.ID">
            </amp-state>

            <amp-list layout="fixed-height" height="40" [src]="cities" single-item items="." noloading binding="no">
                <template type="amp-mustache">
                    <select id="cityGeo" on="change:
                            AMP.setState({
                                cityId: event.value
                            })">
                        <option value="">ESCOLHA UMA CIDADE</option>

                        {{#items}}
                        <option value="{{ID}}">{{Nome}}</option>
                        {{/items}}
                    </select>
                </template>
                <div placeholder role="listitem">
                    <select disabled>
                        <option value="">ESCOLHA UMA CIDADE</option>
                    </select>
                </div>
            </amp-list>
        </div>
    </div>

    <div class="form-group tt-dark select-site">
        <amp-state id="units"
            [src]="'/BuscaUnidadesAmpRequest?isLead=true&isTeste=false&isMapa=false&cidadeId=' + selectedCity.ID">
        </amp-state>

        <amp-list layout="fixed-height" height="40" [src]="units" single-item items="." noloading>
            <template type="amp-mustache">
                <select id="unitGeo" on="change:
                        AMP.setState({
                            unitId: event.value
                        })">
                    <option value="">ESCOLHA UMA UNIDADE</option>

                    {{#items}}
                    <option value="{{ID}}">{{NomeFantasia}}</option>
                    {{/items}}
                </select>
            </template>
        </amp-list>
    </div>
</div>

如果不可能做我想做的事，那么对此最好的选择是什么？

我又如何禁用第一个选项以防止用户选择它？

<option value="" [disabled]="selectedState">UF</option>

编辑忘了提及两件事，选择州后如何手动更新城市的安培状态？以及如何手动以默认值启动状态？我尝试使用以下内容，但始终以状态为空的警告告终：

<amp-state id="teste">
    <script type="application/json">
        {
            "ID": 0,
            "Nome": "",
            "Sigla": ""
        }
    </script>
</amp-state>

Answer 1

如何手动使用默认值启动状态？我尝试使用以下内容，但始终以状态为空的警告结束

您不能-amp绑定中没有初始状态。您必须填充html元素，并且仅在更新值时使用amp-bind。

您可以这样：

{{#items}}
<option value="{{ID}}" {{SELECTED}}>{{Nome}}</option>
{{/items}}

将您的json对象更改为类似的内容：

{
  "id" : "1",
  "name" : "Paris",
  "selected" : "selected"
}

应该做的事

仅在事件发生后加载放大器清单数据

1 个答案: