Angular 2 Dart：模板語法 - 如何連接字符串？

Question

感覺像一個愚蠢的問題，但我不明白。 如何在Angular 2 Dart模板中進行快速字符串連接？

我的組件有一個單獨的html文件，讓我們說my_component.html ：

作品：

....
<div id="abc">
{{order.pickupPlace.email}}
</div>
...

作品：

....
<div id="abc">
{{ ((order.pickupPlace.state) ? order.pickupPlace.state+" ":'')}}
</div>
...

不起作用：

....
<div id="abc">
{{"<br/>"+order.pickupPlace.email}}
</div>
...

不起作用：

....
<div id="abc">
{{order.pickupPlace.name+" "+order.pickupPlace.email}}
</div>
...

試圖在這里的文檔中找到答案（ https://webdev.dartlang.org/angular/guide/template-syntax#!#expression-operators ），但沒有運氣。

當然我可以在有條件輸出的每個元素上使用*ngIf但是有沒有辦法進行簡單的字符串連接？

Answer 1

最好的方法是在你的Component控制器中聲明一個為你做連接的getter，你將獲得dart語法支持，html模板看起來更干凈。

String get myConcatenation => "${order.pickupPlace.name}${order.pickupPlace.email}";


<div id="abc">
   {{myConcatenation}}
</div>

Answer 2

最后兩個例子可以很容易地工作：

<div id="abc">
  <br/>{{order.pickupPlace.email}}
</div>

和：

<div id="abc">
  {{order.pickupPlace.name}} {{order.pickupPlace.email}}
</div>

Angular處理得非常好。 如果你需要一些更復雜的邏輯，你可以將它移動到Dart代碼（但你不能輕易地使用HTML）。

如果您發現創建了許多奇怪的邏輯，請考慮創建更小的組件，以便為您處理此問題。