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

你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 2

你想动态添加一个类，所以试试这个：

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

Answer 3

我通过编写额外的函数来修复语法

<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" : "";
    }

感谢其他人的帮助，这对于理解语法

非常有用

如何在Angular2上的结构指令中包含多个语句

3 个答案: