我如何在Angular2的結構指令中有幾條語句

Question

我是Angular 2的新手，並且之前沒有工作過前端。所以我不確定如何編寫模板結構指令。我需要從ejs/angular 1 to Angular 2

for (var i = 0; i < n; i++) { 
    <% var classes = item.columns[i].fields.skin.indexOf("sign-in") > -1 ? "sign-in" : "" %> 
     <div class="dropdown menu-standout desktop <%= classes %>"> 
      <a><%= item.columns[i].fields.title %></a> 
     </div> 
} 

我最好的猜測翻譯這是這一點，但我敢肯定，我不能有內ngFor兩次大括號。任何幫助？

<li *ngFor="let column of item.columns"> 
    {{var classes = column.fields.skin.indexOf("sign-in") > -1 ? "sign-in":""}} 
    <div class="dropdown menu-standout desktop" {{ classes }}> 
     <a>{{column.fields.title}}</a> 
    </div> 
</li> 

Answer 1

我寫一個額外的功能

<li *ngFor="let column of item[0].fields.columns"> 
    <div class="dropdown menu-standout desktop {{ checkIndex(column) }}" > 
     <a>{{column.fields.title}}</a> 
    </div> 
</li> 

export class PageDropdownComponent { 
    constructor() {} 

    checkIndex(classes:any) { 
     return classes.fields.skin.indexOf("sign-in") > -1 ? "sign-in" : ""; 
    } 

感謝其他人的幫助固定的語法，這是

Answer 2

你can not have binding assignment in template interpolation directive。 因此，它應該是這樣的

{{column.fields.skin.indexOf("sign-in") > -1 ? "sign-in":""}} 

您can not declared variable inside interpolation directive

取出var classes =部分從模板否則將模板解析錯誤。

Answer 3

要動態添加一個類，所以試試這個：

<li *ngFor="let column of item.columns"> 

    <div [class.active] = "isActive = 'column.fields.skin.indexOf("sign-in") > -1 ? "sign-in":"" ' " class="dropdown menu-standout desktop"> 
     <a>{{column.fields.title}}</a> 
    </div> 
</li> 

這是不好的做法有js代碼在您的視圖。

在組件

export class MyComponent { 

isActive: boolean = false; 
}