ng如何分別綁定每個元素

我想在Angular 4中構建一個儀表板。在該儀表板中，我使用* ngFor來遍歷json（通過服務來到）並顯示了一系列卡內的報告。在每張卡片上的標題上有一些圖標，點擊後會執行一些操作，例如刷新，下載，提示框內的彈出信息，pin-unpin等。ng如何分別綁定每個元素

要做到這一點，我想用變量綁定的那些元件類似（點擊）= 「函數（）」，並且還[@animationTag] = 「可變」，如下：

... 
<div class="card" *ngFor="let r of reportCards; let x of index"> 
    <div class="card-header"> 
     {{r.reportName}} 
     <div class="close" aria-label="Close"> 
      <i class="fa fa-thumb-tack" aria-hidden="true" [@pinUnpin]="isPinned" (click)="unpinCard($event)"></i> 
     </div> 
    </div> 
    <div *ngIf="!ifMinimized" class="card-body"> 
     {{r.reportMainDesc}} 
    </div> 
    <div *ngIf="!ifMinimized" class="card-footer"> 
     {{r.reportFooterDesc}} 
    </div> 
</div> 
...

的相應的動畫代碼：

animations: [ 
trigger('pinUnpin', [ 
    state('pin', style({ 
     transform: 'rotate(0deg)', 
    })), 
    state('unpin', style({ 
     transform: 'rotate(90deg)', 
    })), 
    transition('pin => unpin', animate('300ms ease-in-out')), 
    transition('unpin => pin', animate('300ms ease-in-out')) 
]), 
]

內部組件對應的功能：

unpinCard(pEvent) { 
    this.ifMinimized = this.ifMinimized === true ? false : true; 
    this.isPinned = this.isPinned === "pin" ? "unpin" : "pin"; 
}

的問題：

所有功能都工作正常，但問題是，每當我點擊一個特定的卡上的一個（銷）圖標..如果行動在所有卡片上執行，意味着所有卡片都一起最小化，並且所有卡片的（插圖）圖標也同時獲得動畫。

我可以猜測，這是由於ifMinimized & ifPinned綁定所有的通過ngFor產生的卡中的變量。

請幫我理解如何綁定單個元素，這樣如果我點擊一個元素的圖標，該操作只會在該項目上執行，而不會執行由ngFor生成的所有元素。

在此先感謝。

來源

2017-08-24 Indranil Paul

剛剛通過的Reportcard（R）到您的unpinCard功能並設置ifMinimized和isPinned該卡上：r['ifMinimized'] = !r['ifMinimized']

或刪除功能和簡單類型它在html：

(click)="r.ifMinimized = !r.ifMinimized" 
*ngIf="!r.ifMinimized"

來源

2017-08-24 06:38:53 Carsten

非常感謝你的回覆。它的工作現在。感謝你的幫助。 –

Thanks for the upvote :) – Carsten

我正面臨着一個問題。如果我選擇基於函數的方法，那麼首次單擊圖標時，動畫不起作用，但從第二次工作開始。我在控制檯中打印了r [ifMinimized]，第一次未定義，但第二次（單擊）它顯示爲false或true，等等。可以請你解釋一下爲什麼這樣？ –

ng如何分別綁定每個元素

回答

相關問題