amp-list [src] expression evaluates but doesn't fire network request

Question

I'm still getting used to AMP and expressions so apologies if this seems like a basic qn!

I need to use a slightly different URL for <amp-list [src]> based on whether a state is set or not.

• if state selectedStation.selectedStation is an empty string, call deals.json?country=AMP_GEO(ISOCountry)
• else, call deals.json?country=AMP_GEO(ISOCountry)&origin=AMP_STATE(selectedStation.selectedStation)

Initial state:

<amp-state id="selectedStation">
    <script type="application/json">
        {
            "selectedStation": ""
        }
    </script>
</amp-state>

amp-list expression:

<amp-list class="mt1" width="auto" height="150px" layout="fixed-height" 
  [src]="selectedStation.selectedStation == '' ? 'deals.json? 
  country=AMP_GEO(ISOCountry)' : 'deals.json? country=AMP_GEO(ISOCountry)&origin=AMP_STATE(selectedStation.selectedStation)'">

The expression evaluates as seen from the console log warning using #development=1 mode: Default value (null) does not match first result (deals.json?country=AMP_GEO(ISOCountry)) for . We recommend writing expressions with matching default values, but this can be safely ignored if intentional.

However, the request isn't fired. Am I doing something wrong with my expression or missing anything obvious?

Thanks a ton!

Answer 1

From amp-bind documentation (emphasis mine):

For performance and to avoid the risk of unexpected content jumping, amp-bind does not evaluate expressions on page load . This means that the visual elements should be given a default state and not rely amp-bind for initial render.

In other words, since you only specified [src] and no src , src is empty on page load and [src] will only evaluate when the user interacts with the page. You'll probably want to have both of them set:

<amp-list
  class="mt1"
  width="auto"
  height="150px"
  layout="fixed-height"
  src="deals.json?country=AMP_GEO(ISOCountry)"
  [src]="selectedStation.selectedStation == '' ? 'deals.json?country=AMP_GEO(ISOCountry)' : 'deals.json? country=AMP_GEO(ISOCountry)&origin=AMP_STATE(selectedStation.selectedStation)'"
>