附加數據以查看NativeScript NG2

Question

**更新**

在我的代碼中，我有一張卡，它在視圖中保存作業數組的當前索引。 這樣，用戶可以使用手勢從屏幕上刷卡，然后顯示作業數組中的下一個索引。

在我的組件中

@ViewChild("card") card: ElementRef;
@ViewChild("job") job: ElementRef;

let jobsArray = ["Developer","Food Editor","Journalist","Actor","Fisherman","Chef","Designer","Musician","Baker"];

this.job.nativeElement = jobsArray[i];

這樣，我就可以設置對象，以便在此功能內部處理刷卡時的操作，

this.card.nativeElement.on(GestureTypes.swipe, function (args) {
 // DO stuff
}

我的問題是

我無法從作業數組中獲取任何數據以顯示在視圖中。 我正在嘗試使用可以在網上找到的東西來完成這項工作，但是我不確定自己是否步入正軌。

我通過使用正確嗎

@ViewChild("card") card: ElementRef;
@ViewChild("job") job: ElementRef;

**結束更新**

背景

我正在嘗試學習編寫NativeScript。 我有Angular2的經驗，所以我認為這很簡單。

我找到了一個如何從視圖中滑動數組的示例，但是它在核心NativeScript中。

我正在嘗試將其轉換為Angular，但是我很確定我沒有正確綁定數據。

例

在視圖中

<ActionBar title="Stream" class="action-bar">
    <ActionItem text="Menu" ios.position="left"></ActionItem>
    <ActionItem text="Group" ios.position="right"></ActionItem>
</ActionBar>
<FlexboxLayout flexDirection="column" class="stream">
    <StackLayout id="card" class="card">
        <Label id="job"></Label>
    </StackLayout>
</FlexboxLayout>

所以我在那個例子中意識到，這不是我通常向Angular2視圖添加數據的方式。 所以我嘗試了添加數據的這種變化，

 <StackLayout card="card" i="index"  #card [card]="card" id="card" class="card">

該示例最初在組件中使用，

 var verdict = _page.getViewById("verdict");

但是我已經讀過在nativescript中使用angular2時會這樣做，

@ViewChild("job") job: ElementRef;

let jobsArray = ["Developer","Food Editor","Journalist","Actor","Fisherman","Chef","Designer","Musician","Baker"];

this.job.nativeElement = jobsArray[i];

基本上，我要完成的工作是在我看來有一個卡片部分。 然后一次顯示卡中作業數組的一個索引。 因此，當我滑動視圖時，每次我從視圖中滑動卡片時，它都會在作業陣列中移動。

這是我現在擁有的組件，

export class StreamComponent implements OnInit {
    @ViewChild("card") card: ElementRef;
    @ViewChild("job") job: ElementRef;

    constructor(private router: Router) { }

    ngOnInit(): void {
        this.singleCard();
    }

    singleCard() {

        let jobsArray = ["Developer","Food Editor","Journalist","Actor","Fisherman","Chef","Designer","Musician","Baker"];

        let i = 0;

        this.card.nativeElement.on(GestureTypes.swipe, function (args) {
            this.job.nativeElement = jobsArray[i];
            i = i + 1;

            if(args.direction === 1){
                console.log("You liked it, save to your favs!")
                this.card.animate({ translate: { x: 1000, y: 100 } })
                    .then(function () { return this.card.animate({ translate: { x: 0, y: -2000 } }); })
                    .then(function () { return this.card.animate({ translate: { x: 0, y: 0 } }); })
                    .then(function () {
                        this.job.text = jobsArray[i];
                    })
                    .catch(function (e) {
                        console.log(e.message);
                    });
            }
            else{
                console.log("You hate it, get rid of that shit!")
                this.card.animate({ translate: { x: -1000, y: 100 } })
                    .then(function () { return this.card.animate({ translate: { x: 0, y: -2000 } }); })
                    .then(function () { return this.card.animate({ translate: { x: 0, y: 0 } }); })
                    .then(function () {
                        this.job.text=jobsArray[i];

                    })
                    .catch(function (e) {
                        console.log(e.message);
                    });
            }

        });
    }

}

問題

將數據綁定到視圖

this.job.nativeElement

在視圖中一次顯示一張數據。

Answer 1

下面的例子。 創建新項目tns create cardswipe --ng編輯items.component.ts和.html .ts

import { SwipeGestureEventData } from "ui/gestures";

items: Item[];
item: Item;
index: number = 0;

constructor(private itemService: ItemService) { }

ngOnInit(): void {
    this.items = this.itemService.getItems();
    this.item = this.items[this.index];
    this.index++;
}

onSwipe(args: SwipeGestureEventData) {

    if (this.index < this.items.length)
        this.index++;
    else
        this.index = 0;
    this.item = this.items[this.index];
}

HTML代碼

<ActionBar title="My App" class="action-bar">
</ActionBar>
<StackLayout class="page">
   <StackLayout id="card" class="card" (swipe)="onSwipe($event)">
        <Image id="guy"></Image>
        <Label id="name" [text]="item.name"></Label>
        <Label id="job" [text]="item.role"></Label>
        <Label id="age" [text]="item.id"></Label>
    </StackLayout>
</StackLayout>

如果需要，在滑動時添加動畫。

app.css

.card{
margin:20px;
background-color:#03A9F4;
border-radius:5;
height:200px;
}

Label{
    font:40;
    color:white;
}