用角度切換本地腳本中的listview內容

Question

您好我需要在listview中切換單個內容時，在nativescript angular中單擊相應按鈕時，我添加了下面的代碼。如果有人知道請回答我。在此先感謝

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(); 
    } 

} 

，在這裏我items.component.html

<ActionBar title="My App" class="action-bar"> 
</ActionBar> 
<StackLayout class="page"> 


    <ListView [items]="items" class="list-group"> 
     <template let-item="item"> 
    <GridLayout columns="auto,auto" width="210" height="210" > 
      <Label [text]="item.name" col="0" 
       class="list-group-item" visibility="{{isList ? 'visible' : 'collapse'}}"></Label> 
       <Button [text]="isList ? 'hide' : 'Show'" col="1" (tap)="toggle()"></Button> 

      </GridLayout> 
     </template> 

    </ListView> 


</StackLayout> 

這裏的問題是，當我點擊按鈕，所有的標籤切換。所以我需要動態生成變量。我很初學，所以任何人都可以幫助我？ 提前致謝。

Answer 1

猜你已經修改了入門模板。所以如果你想隱藏特定列表項目的標籤，試試這個。

到item.ts

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

設定值添加visible屬性visible在item.service.ts。它將如下所示。

{ 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; 
}