附加数据以查看 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;
}

附加数据以查看 NativeScript NG2

Attaching Data To View NativeScript NG2

nativescript

angular2-nativescript

angular