関数angle2の出力に基づいてビューのプロパティを変更します

Question

私のnativescript-angularアプリケーションでは、サーバーから返されたデータのリストが表示されます。 Listviewに結果を表示します。各項目がリストに表示されるので、関数checkIfAdded（item）を実行します。この関数は各データ項目を調べ、各項目について各項目の「isAdded」論理値プロパティを計算し、各項目に対してtrueまたはfalseを返します。この関数の結果に基づいて、表示されているボタンの3つのプロパティを次のように変更したいと考えています。 1.ボタンにCSSクラスを追加します。 2.ボタンの表示テキストを変更します。 3。ボタンで実行される機能を変更したい。以下のコードに示すよう

は現在、私はこれをやっている：

<ListView row="2" *ngIf="searchItemsReturned" [items]="this.searchResults" class="list-group m-x-10" [itemTemplateSelector]="templateSelector"> 

//********* Template Type 1 **********   
<ng-template nsTemplateKey="type1" let-item="item"> 
    <StackLayout (tap)="onFeedItemSelect(item)"> 
     <Label [text] = item.name></Label> 
     <Button [ngClass]="{'remove-button': checkIfAdded(item)}" 
      class="btn-highlight btn-add m-y-1 m-r-4" row="0" 
      [text]="checkIfAdded(item) ? 'Remove' : 'Add'" 
      (tap)="checkIfAdded(item) ? removeFromList(item): addToList(item)"> 
     </Button> 
</StackLayout> 

この方法は、コードで動作しますが、私は結合して呼び出す同じビュープロパティ内の関数を呼び出しています同じ機能を3回！これは、ボタンをタップするなどして変更をトリガするたびに、変更検出を複数回実行するようにも見えます。リストビューの各項目の下に表示されるボタンの3つのプロパティをバインドするには、より良い方法がありますか？ ありがとう

Answer 1

データをロードするときに、isAddedプロパティを計算します。あなたのhtmlで毎回その関数を呼び出すのではなく、そのプロパティを使うだけです。

//********* Template Type 1 **********   
<ng-template nsTemplateKey="type1" let-item="item"> 
    <StackLayout (tap)="onFeedItemSelect(item)"> 
     <Label [text] = item.name></Label> 
     <Button [ngClass]="{'remove-button': item.isAdded}" 
     class="btn-highlight btn-add m-y-1 m-r-4" row="0" 
     [text]=" item.isAdded ? 'Remove' : 'Add'" 
     (tap)=" item.isAdded ? removeFromList(item): addToList(item)"> 
     </Button> 
</StackLayout>