Angular 2.0 ng-用於在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="footer-link demo-icon icon-{{footerLink.iconName}} ng-binding"

標題按預期出現。

我想念什么？ 任何幫助表示贊賞:)

Answer 1

那是因為

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

是一個原始字符串，而您希望它的行為像一個表達式。

你想這樣做

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

看到這個plnkr 。

PS：我完全不建議您使用舊版本。 文檔已經過時（不斷更新，但仍然過時），新的Alpha版本也在不斷變化（有很多重大更改）。 在發布穩定版本之前，應始終堅持使用最新的Alpha版本。

Answer 2

您應該將CSSClass添加到視圖指令列表中：

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

也看看這個矮人