使用angular切换nativescript中的listview内容

时间:2017-03-08 07:35:21

标签: android listview angular nativescript

我需要在nativescript angular中单击相应的按钮时切换listview中的各个内容, 我添加了下面的代码。如果有人知道请回答我。提前谢谢

[error] could not find implicit value for evidence parameter of type tests.NewTest.MyClassImplicits.MyClassOperators[Double]
[error]     val myClassOfInt = new MyClass[Double](1.0)
[error]                        ^
[error] one error found

这里是我的items.component.html

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

import { Item } from "./item";
import { ItemService } from "./item.service";

@Component({
    selector: "ns-items",
    moduleId: module.id,
    templateUrl: "./items.component.html",
})
export class ItemsComponent implements OnInit {
    items: Item[];
    isList = true;

    toggle(){
        this.isList = !this.isList;

 }

    constructor(private itemService: ItemService) { }

    ngOnInit(): void {
        this.items = this.itemService.getItems();
    }

}

这里的问题是当我点击按钮时所有标签都是切换。所以我需要动态生成变量。我是初学者,所以任何人都可以帮助我? 提前谢谢。

1 个答案:

答案 0 :(得分:3)

猜猜你已经修改了入门者模板。因此,如果您想在特定列表项上隐藏标签,请尝试此操作。

visible属性添加到 item.ts

export class Item {
    id: number;
    name: string;
    role: string;
    visible: boolean;
}

item.service.ts 中将值设置为visible。它将如下所示。

 { id: 1, name: "Ter Stegen", role: "Goalkeeper", visible: true },
 { id: 3, name: "Piqué", role: "Defender", visible: true },

您的列表模板应为

 <template let-item="item">
      <GridLayout class="list-group-item" columns="*,auto">
         <Label col="0" [text]="item.name" [visibility]="item.visible ? 'visible' : 'collapse'"></Label>
         <Button class="btn" col="1" [text]="item.visible ? 'Hide' : 'Show'" (tap)="toggle(item)"></Button>
      </GridLayout>
 </template>

最后,切换方法将是,

ngOnInit(): void {
    this.items = this.itemService.getItems();
}

toggle(item: Item) {
    item.visible = !item.visible;
}