Horizo​​ntal WrapLayout垂直显示元素而不是水平显示元素

Question

我对NativeScript完全陌生，但它看起来像一个甜蜜的平台。我正在写一个玩具应用程序，下面是我的设置：

//代码隐藏

import {AddExpenseModel} from "./add-expense-view-model";
import {EventData} from "tns-core-modules/data/observable";
import {Page} from "tns-core-modules/ui/page";

let expenseModel = new AddExpenseModel();

export function navigatingTo(args: EventData) {
    let page = <Page>args.object;
    let textField = page.getViewById("tags");

    textField.on("textChange", (ev)=>{expenseModel.onTagsTextFieldChange(ev)});
    page.bindingContext = expenseModel;
}

export function submit() {
    expenseModel.createNewExpense()
}

//视图模型

import {Observable, PropertyChangeData} from "tns-core-modules/data/observable";
import {ObservableArray} from "tns-core-modules/data/observable-array";
let u = require('underscore');

export class AddExpenseModel extends Observable {
       ...

    public parsed_tags;

    constructor() {
        super();
        this.parsed_tags = new ObservableArray([]);
        ...
    }

    public onTagsTextFieldChange(ev) {
        let that = this;
        // empty
        u.forEach(u.range(this.parsed_tags.length), function (_) {
            that.parsed_tags.pop()
        });

        let parsed = this.parseTags(ev.value);
        u.forEach(parsed, function (el) {
            that.parsed_tags.push(el);
        });
    }   

    private getParsedTags() {
        //unbox
        return u.map(this.parsed_tags, (el: string) => el)
    }

    private parseTags(tag_string) {

        let arr = u.map(tag_string.split(','), (tag: string) => tag.trim().toLocaleLowerCase());

        arr = u.uniq(arr);
        arr = u.filter(arr, u.negate(u.isEmpty))

        return arr;
    }
}

//视图

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
    <StackLayout class="p-20">
        <Label text="Add new expense"/>

        <text-field
                id="name" text="{{ name }}"
                row="0"/>
        <text-field id="amount" stext="{{ amount, amount | numberConverter }}" />

        <text-field id="tags" secure="false" text="{{ tags }}" 
        />
        <WrapLayout orientation="horizontal" height="300" width="300">
            <ListView items="{{ parsed_tags }}">
                <ListView.itemsLayout>
                    <Label text="{{ $value }}" width="70" backgroundColor="red"/>
                </ListView.itemsLayout>
            </ListView>
        </WrapLayout>

        <button text="Add expense" id="submit-button" tap="submit"/>
    </StackLayout>
</Page>

我想要实现的是，当用户在tags文本字段中书写时，样式化标签会显示在WrapLayout中。但是，这样可以使标签始终堆叠在垂直。这是截图
 

我尝试将整个WrapLayout部分移出StackedLayout部分，但我得到了cannot read property 'on' of undefined, undefined。 将标签放在WrapLayout内不在ListView内（即静态）按预期工作，这使得我可能误用ListView或WrapLayout。任何指示将不胜感激：）

干杯

更新
根据Eddy的建议，我使用了Repeater。使用以下xml

    <Repeater items="{{ parsed_tags }}">
        <Repeater.itemsLayout>
            <WrapLayout orientation="horizontal" backgroundColor="#d3d3d3"/>
        </Repeater.itemsLayout>

        <Repeater.itemTemplate>
            <Label text="{{ $value }}" backgroundColor="#84ddff" marginRight="5" marginLeft="5"/>
        </Repeater.itemTemplate>
    </Repeater> 

正确地产生了这个：

我仍然不明白为什么使用ListView不起作用。我使用了Sidekick的调试器，这就是我所看到的。

    <ListView items="{{ parsed_tags }}">
        <ListView.itemsLayout>
            <WrapLayout orientation="horizontal" backgroundColor="#d3d3d3" marginRight="5" marginLeft="5"/>
        </ListView.itemsLayout>

        <ListView.itemTemplate>
            <Label text="{{ $value }}" backgroundColor="#84ddff" marginRight="5" marginLeft="5"/>
        </ListView.itemTemplate>
    </ListView>