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>

這段代碼過去通常在帶有Underscore模板的Backbone中正常工作。 但是，看來Angular2會改變!! +“ 0”的求值方式！

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

在Backbone + Underscore中：模板中的<% !!+"0" %>顯示false 。

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

這是它的游樂場http://plnkr.co/E3YGYeQ5ZZIRh8JxsUN6 。

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

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) ;
  }
}

也可以看看
-https://angular.io/docs/ts/latest/guide/template-syntax.html#!#template - expressions
-https://angular.io/docs/ts/latest/guide/template-syntax.html#!#template - statements