我在Angular 2應用程序中有一種情況，我正在遍歷數組如果對於這些對象中的任何一個，「已完成」屬性設置爲false，我想打印到視圖「是」，因爲（至少）一個對象的「已完成」等於false - 意思是它仍然是一個活躍的旗幟。Angular 2：迭代對象數組並在視圖中打印「是」一次如果任何迭代對象返回「true」作爲檢查

但是，現在，我的模板代碼正在向視圖打印'是'，每次其中一個對象的「已完成」屬性設置爲false時返回true。如何調整此代碼，以便只有在迭代的數組中的任何一個（或多個）對象將「已完成」屬性設置爲true時，纔會打印一次「是」？

這裏是我的代碼：

<td *ngFor="let flag of service.flags"> 
    <ng-template *ngIf="flag?.completed === false"> 
     <span class="standard-flag">Yes</span> 
    </ng-template> 
</td>

我也嘗試用三元運算符，但它給了我同樣的結果：

<td *ngFor="let flag of service.flags"> 
    <ng-template *ngIf="flag?.completed === false ? true : false""> 
     <span class="standard-flag">Yes</span> 
    </ng-template> 
</td>

雖然我通常會處理在組件的邏輯，我我認爲必須有一種方法，或許還有索引，我可以在這個場合看到這一點。

來源

2017-07-27 Ademo

我會在component.ts文件中做迭代，然後設置一個變量（'this.completed'）爲true，當它們中的任何一個返回true時。然後，在模板中，您可以在DOM元素上指定一個屬性來顯示「yes」：'[hidden] =「completed」'：

是

'。 –

我同意，通常我會在組件中執行此操作並打印到結果視圖。然而，在這種特殊情況下（因爲我不想進入），我寧願直接在視圖中處理它。我想一定有辦法做到這一點索引的某種。 – Ademo

您無需ngFor即可完成此項工作。 ngFor重複你的陣列中的每個元素，這就是爲什麼你看到一堆Yes的

使用Array.some()這返回true立即如果數組中的元素至少一個返回true，所以它是正確的這裏的工作的工具

<td> 
    <span *ngIf="service.flags.some(flag => flag.completed === false) === true"> 
     Yes 
    </span> 
</td>

來源

2017-07-27 22:17:45 Dummy

聽起來很有希望。會試試看。我沒有意識到我可以基本上迭代數組中的所有對象而不使用* ngFor。 – Ademo

獲取錯誤： zone.js：522未處理的Promise拒絕：模板解析錯誤：解析器錯誤：綁定無法在[service.flags.some（flag => flag.com）中列42中包含賦值= false = == true] – Ademo

聽起來很奇怪，試着將這個'service.flags.some（flag => flag.completed === false）=== true'重構成一個函數，並在'ngIf'裏面調用函數 – Dummy

Angular 2：迭代對象數組並在視圖中打印「是」一次如果任何迭代對象返回「true」作爲檢查

是

回答

相關問題