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;

** END UPDATE **

背景

我正在努力学习编写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

1 个答案: