根據角度函數2的輸出更改視圖屬性

Question

在我的nativescript-angular應用程序中，我顯示了從服務器返回的數據列表。 我在Listview中顯示結果。 當列表中顯示每個項目時，我運行一個函數checkIfAdded（item）。 此函數查看每個數據項，並為每個項目計算一個“ iwego”布爾屬性，並為每個項目返回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個屬性。 謝謝

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>