如果绑定的数组为空，则在列表视图中显示特定列表项

Question

我有一个绑定到集合的 ListView：

    <ListView  row="1" items="{{ measurements }}" id="measurement-list" loaded="" itemTap="">
        <ListView.itemTemplate>
            <GridLayout columns="5,*,10,*" rows="*, *" class="measurement-item">
            <Label class="{{'severity-' + TrendArrow}}" col="0" rowSpan="2"  text="" />
            <Label class="measurement-value" col="1" text="{{ValueInMgPerDl}}" />
            <Label class="measurement-uom"   col="1" row="1" text="mg/dl"/>
            <Label class="measurement-time"  col="3" text="{{Timestamp}}"/>                
            </GridLayout>
        </ListView.itemTemplate> 
    </ListView>

如果 {{connections}} 长度为 0，我想显示以下内容

<Label col="1" text="No Measuremenets Available" textWrap="false" />

其他方面我想显示上面的 item.Template。我怎样才能做到这一点？到目前为止我尝试过的一切都失败了。视图模型有一个布尔值 hasMeasurement 属性但是当我尝试在 XML 中执行以下操作时失败了，有任何指导吗？ UI 最终只在每个 table 项目中显示 [object object ]。

<ListView  row="1" items="{{ measurements }}" id="measurement-list">
    <ListView.itemTemplate>
        <GridLayout columns="5,*,10,*" rows="*, *" class="measurement-item" visibility="{{ hasMeasurement ? 'visible' : 'collapsed' }}">
        <Label class="{{'severity-' + TrendArrow}}" col="0" rowSpan="2"  text="" />
        <Label class="measurement-value" col="1" text="{{ValueInMgPerDl}}" />
        <Label class="measurement-uom"   col="1" row="1" text="mg/dl"/>
        <Label class="measurement-time"  col="3" text="{{Timestamp}}"/>                
        </GridLayout>
        <GridLayout rows="" columns="" visibility="{{ hasMeasurement ? 'visible' : 'collapsed' }}" >
            <Label text="No Measurements Available" textWrap="false" />                    
        </GridLayout>
    </ListView.itemTemplate> 
</ListView>

Answer 1

您可以试试这个，这取决于主容器是什么，在本例中是 GridLayout：

<Label row="1" text="No Measuremenets Available" textWrap="false" visibility="{{ measurements.length, measurements.length === 0 ? 'visible' : 'collapsed' }}" />

<ListView  row="1" items="{{ measurements }}" id="measurement-list" loaded="" itemTap="" visibility="{{ measurements.length, measurements.length === 0 ? 'collapsed' : 'visible' }}" >
    <ListView.itemTemplate>
        <GridLayout columns="5,*,10,*" rows="*, *" class="measurement-item">
        <Label class="{{'severity-' + TrendArrow}}" col="0" rowSpan="2"  text="" />
        <Label class="measurement-value" col="1" text="{{ValueInMgPerDl}}" />
        <Label class="measurement-uom"   col="1" row="1" text="mg/dl"/>
        <Label class="measurement-time"  col="3" text="{{Timestamp}}"/>                
        </GridLayout>
    </ListView.itemTemplate> 
</ListView>

请注意标签和列表视图中的以下行，它们是如何 "reversed":

visibility="{{ measurements.length, measurements.length === 0 ? 'visible' : 'collapsed' }}"

如果绑定的数组为空，则在列表视图中显示特定列表项

Display a specific list item in a list view if the array bound to it is empty

javascript

nativescript