如何使Nativescript列表视图工作

Question

我正在做一个带有nativescript和角2的应用程序。我尝试使用nativescript列表视图组件，但我无法使它工作，当我尝试这个应用程序时，我得到的总是“对象对象”。

这是我的视图代码：

                               <grid-layout columns="*" rows="*">
                               <ListView [items]="itemsd" class="listview" #LISTV>
                                   <ListView.itemTemplate>
                                        <grid-layout columns="50, *" rows="*" class="item item-avatar">
                                            <image src="{{ '~/images/' + img }}" col="0" ></image>
                                            <stack-layout col="1">
                                                <label text="{{ artist }}" class="h2" col="1"></label>
                                                <label text="{{ title }}" class="p" col="1"></label>
                                            </stack-layout>
                                        </grid-layout>
                                   </ListView.itemTemplate>
                               </ListView>
                           </grid-layout>

这里是我的ts代码：

    ngOnInit(): void {
    this.fakeListItems = [{
        "img":"ANDY.jpg",
        "artist":"ANDY",
        "title":"A User"
    }]
    this.itemsd = new ObservableArray(this.fakeListItems);
}

我尽了一切努力使这个列表视图工作，但文档并不是很好，并且有许多版本来自不同的telerik网站。有办法让这件事成功吗？怎么做呢？

谢谢。

Answer 1

可能要归咎于语法的混合。尝试将items="itemsd“更改为items=”{itemsd}“。

下面是我的一个演示应用程序的2.3NS代码，它运行得很好：

  <ListView items="{{ peripherals }}" itemTap="{{ onPeripheralTap }}" separatorColor="#ffffff">
      <ListView.itemTemplate>
          <StackLayout orientation="horizontal">
              <StackLayout cssClass="padded-label-stack" width="60%">
                <Label horizontalAlignment="left" text="{{ advertisement }}"/>
                <Label horizontalAlignment="left" text="{{ number1 + ' coins for €' + number2 }}"/>
              </StackLayout>
              <StackLayout cssClass="padded-label-stack" width="40%">
                <Label horizontalAlignment="right" text="{{ 'Time: ' + timestamp }}"/>
                <Label horizontalAlignment="right" text="{{ distance + 'm away' }}"/>
              </StackLayout>
          </StackLayout>
      </ListView.itemTemplate>
  </ListView>

您的ts-代码似乎与我的没有明显的不同，与之不同的是，您并没有主动地使您的对象可观察到。您可以很好地初始化数组。

observablePeripheralArray = new observableArray.ObservableArray();
peripheralArray = new Array();
peripherals = this.observablePeripheralArray;

var that = this;
var onDiscovered = function (result) {
  let extended = new ExtendedPeripheral(result);
  var obsp = new Observable(extended);
  ...
  that.observablePeripheralArray.splice(i, 0, obsp);

一方面:考虑使用本地脚本插件获取Visual代码，这样您就可以运行调试器来查看您的项目到底是什么。或者试试JSON.stringify(this.itemsd)，看看你的结构是否正确。如果对象总是包含相同的字段，则为它们创建一个类。

Answer 2

我认为你只是搞错了语法，{{ }}应该是[ ]

<grid-layout columns="*" rows="*">
     <ListView [items]="itemsd" class="listview" #LISTV>
          <ListView.itemTemplate>
                <grid-layout columns="50, *" rows="*" class="item item-avatar">
                        <image [src]="'~/images/'+img" col="0" ></image>
                              <stack-layout col="1">
                                  <label [text]="artist" class="h2" col="1"></label>
                                  <label [text]="title" class="p" col="1"></label>
                               </stack-layout>
                 </grid-layout>
            </ListView.itemTemplate>
       </ListView>
</grid-layout>