Angular2模板問題與雙不（!! +）

Question

已經粉碎我的頭幾個小時，但我現在非常確定這是一個Angular2問題，在某個地方。

場景：我從我的PHP "isLiked": "1"獲取JSON中的tinyint。由於JSON，tinyint被Javascript理解爲字符串而不是布爾值，因此我一直在使用良好的ol'!!+isLiked將其更改爲布爾值。

在我Angular2模板我需要做的：

<i class="glyphicon {{ (!(!!+post.isLiked)) ? 'glyphicon-heart-empty' : 'glyphicon-heart' }}"></i>

此代碼用於在骨幹與下劃線模板正常工作。但是，似乎Angular2做了一些改變!! +「0」評估的方式！

在Chrome控制檯中： !!+"0"返回false。

在Backbone +下劃線： <% !!+"0" %>在模板中顯示false。

In Angular2： {{ !!+"0" }}在模板中顯示true。

這是它的一個操場http://plnkr.co/E3YGYeQ5ZZIRh8JxsUN6。

false來自index.html中的一個簡單的Javascript document.write(!!+"0")，在Angular做任何事情之前。

該true是src/app.ts模板。

我錯過了什麼嗎？

Answer 1

Angular模板語法不支持完整的JavaScript語法。 只需將代碼移到一個函數並調用它，而不是

<i class="glyphicon {{ truthyCheck(+post.isLiked) ? 'glyphicon-heart-empty' : 'glyphicon-heart' }}"> 

class MyComponent { 
    trutyCheck(value):boolean { 
    return !(!!+post.isLiked) ; 
    } 
} 

Plunker example

又見
- https://angular.io/docs/ts/latest/guide/template-syntax.html#!#template-expressions
- https://angular.io/docs/ts/latest/guide/template-syntax.html#!#template-statements