Question

我正在使用nativescript和angular 2进行应用程序。我正在尝试使用nativescript listview组件，但我无法使其正常工作，我在尝试应用程序时得到的内容始终是“[object object]”。

这是我的观看代码：

                               <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);
}

我尝试了所有方法来使这个listview工作，但文档并不那么好，并且有许多版本形成telerik的不同网站。反正有没有让这项工作？如何？

谢谢。

Answer 1

语法混合可能是罪魁祸首。尝试更改[items] =＆＃34; itemsd＆＃34; to items =＆＃34; {{itemsd}}＆＃34;。

来自我的演示应用程序的角度2.3 NS代码，工作得很好：

  <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);

一个旁注：考虑使用nativescript插件获取Visual Studio代码，这样您就可以运行调试器来查看您的项目究竟是什么。或者尝试JSON.stringify（this.itemsd [0]）以查看您的结构是否正确。如果您的对象始终包含相同的字段，请为它们创建一个类。

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>

如何使Nativescript listview工作

2 个答案: