Angular 2.0 ng-for 不显示 html 标签内的值

Question

我正在使用 Angular 2.0 开发的小型应用程序的页脚中构建动态链接。所以，我有这个用于页脚组件：

// the main footer object ..
function FooterComponent() {

    // define the links in the footer ..
    this.footerLinks = [
        {
            'iconName': 'users',
            'title': 'Friends'
        },
        {
            'iconName': 'list-bullet',
            'title': 'List'
        },
        {
            'iconName': 'cog',
            'title': 'Settings'
        }
    ];
}
FooterComponent.annotations = [
    new angular.ComponentAnnotation({
        selector: 'fly-footer'
    }),
    new angular.ViewAnnotation({
        directives: [angular.NgFor],
        templateUrl: 'templates/footer.html'
    })
];

并且到目前为止我已经尝试了这些变体：

<div *ng-for="#footerLink of footerLinks">
    <a href="javascript:;" class="footer-link demo-icon icon-{{footerLink.iconName}}">{{footerLink.title}}</a>
</div>

和

<a href="javascript:;" *ng-for="#footerLink of footerLinks" class="footer-link demo-icon icon-{{footerLink.iconName}}">{{footerLink.title}}</a>

结果是它们都没有显示图标名称。相反，我看到了（链接的 class）：

class="footer-link demo-icon icon-{{footerLink.iconName}} ng-binding"

标题如期出现。

我错过了什么？感谢您的帮助:)

Answer 1

您应该将 CSSClass 添加到您的视图指令列表中：

new angular.ViewAnnotation({
    directives: [angular.NgFor, angular.CSSClass],
    templateUrl: 'templates/footer.html'
})

也看看this plunker

Answer 2

那是因为

class="footer-link demo-icon icon-{{footerLink.iconName}}"

是一个原始字符串，而您希望它表现得像一个表达式。

您想这样做

class="footer-link demo-icon" [class]="'icon-'+footerLink.iconName"

看到这个plnkr。

PS : 我完全不建议你坚持使用旧版本。文档已经过时（不断更新但仍然过时）并且新的 alpha 版本不断变化（有很多重大变化）。在发布稳定版本之前，您应该始终坚持使用最新的 alpha 版本。

Angular 2.0 ng-for 不显示 html 标签内的值

Angular 2.0 ng-for not displaying values inside html tags

javascript

components

angular