在NativeScript和Angular中刷新ListView在運行時添加新元素

我正在構建一個基於ListView的組件，類似於{N}頁中的雜貨示例。我有一個「+」按鈕，需要新的項目添加到列表中，我有這樣的代碼：在NativeScript和Angular中刷新ListView在運行時添加新元素

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    moduleId: module.id, 
    selector: 'my-list', 
    templateUrl: 'my-list.component.html' 
}) 
export class ListComponent implements OnInit { 
    private myList: CustomObject; 
    constructor() { } 

    ngOnInit() { } 

    addItem(){ 
     this.myList.push(new CustomObject()); 
    } 

}

這裏是模板：

<StackLayout> 
    <Button text="+" (tap)="addItem()" ></Button> 
    <ListView [items]="myList"> 
     <template let-item="item" let-i="i"> 
      <Label text="item.name"></Label> 
     </template> 
    </ListView> 
</StackLayout>

我的問題是，當我點擊在「+」按鈕上，我收到了一個不可理解的異常。當我用代碼填充列表時，沒有問題，但我需要用戶可以向視圖添加新元素。像我描述的那樣，實現動態ListView的正確方法如何？

編輯：

未捕獲的異常內容時發生的「主」線程。 com.tns.NativeScriptException：調用js方法getView失敗

錯誤在列表模板中找不到合適的視圖！嵌套級：0文件：「/data/data/org.nativescript.MyApp/files/app/tns_moudules/nativescript-angular/directives/list-view-comp.js，線：135柱：8

堆棧跟蹤：框架：功能： 'getSingleViewRecursive'，文件：....

來源

2016-11-30 Miguel

你對「不可理解」是什麼意思？爲了讓人不知所措能夠在這裏發佈？ –

我的意思是在StackTrace引用.js文件中有很多行。我發佈了第一行（出於某種原因，我無法複製剪貼板上的所有異常） – Miguel

在NativeScript +角-2應用程序可以使用關於如何在NativeScript + NG2提供經由異步管線數據AsyncPipe

實施例應用程序可以找到here

尤爲引人注目的是RxObservable

page.component.ts

import { Component, ChangeDetectionStrategy } from "@angular/core"; 
import { Observable as RxObservable } from "rxjs/Observable"; 

export class DataItem { 
    constructor(public id: number, public name: string) { } 
} 

@Component({ 
    templateUrl: "ui-category/listview/using-async-pipe/using-async-pipe.component.html", 
    changeDetection: ChangeDetectionStrategy.OnPush, 
}) 
export class UsingAsyncPipeComponent { 
    public myItems: RxObservable<Array<DataItem>>; 

    constructor() { 
     let items = []; 
     for (let i = 0; i < 3; i++) { 
      items.push(new DataItem(i, "data item " + i)); 
     } 

     let subscr; 
     this.myItems = RxObservable.create(subscriber => { 
      subscr = subscriber; 
      subscriber.next(items); 
      return function() { 
       console.log("Unsubscribe called!"); 
      }; 
     }); 

     let counter = 2; 
     let intervalId = setInterval(() => { 
      counter++; 
      items.push(new DataItem(counter + 1, "data item " + (counter + 1))); 
      subscr.next(items); 
     }, 1000); 

     setTimeout(() => { 
      clearInterval(intervalId); 
     }, 15000); 
    } 
}

page.component.html

<ListView [items]="myItems | async" class="list-group"> 
    <template let-item="item" let-i="index" let-odd="odd" let-even="even"> 
     <GridLayout class="list-group-item" [class.odd]="odd" [class.even]="even"> 
      <Label [text]="item.name" android:class="label-item"></Label> 
     </GridLayout> 
    </template> 
</ListView>

使用在這個基本例如模擬異步與setInterval但基於相同的邏輯，你可以通過一個按鈕來實現你想要的UX。

來源

2016-11-30 12:32:06

稍微調用此代碼，我就達到了我想要的效果。我現在的問題是，如果我在模板中添加自定義組件而不是標籤，我會得到相同的異常。有沒有任何網站解釋這是如何工作的？謝謝！ – Miguel

在NativeScript和Angular中刷新ListView在運行時添加新元素

回答

相關問題