角度付きのネイティブスクリプトでリストビューの内容を切り替える

Question

こんにちは私は、それぞれのボタンがネイティブスクリプトでクリックされたときにリストビューで個々のコンテンツを切り替える必要があります。 私は自分のコードを追加しました。もし誰かが私に答えてください。ここでは事前のおかげ

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.service.tsでvisibleにitem.ts

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

設定値に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; 
}