来自ngFor项的动态routerLink值给出错误"得到插值({{}})其中表达式是预期的"

Question

我正在尝试routerLink根据组件中的动态项集来设置指令中的值.但Angular2引发了一个错误:

EXCEPTION: Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 1 in [ {{item.routerLink}} ] in AppHeader@5:40 ("
    <a *ngFor="let item of headerItems" [ERROR ->][routerLink]=" {{item.routerLink}} ">
      {{item.text}}
    </a>
"): Header@5:40

header.component.ts

import {Component} from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angular/router-deprecated';

@Component({
  selector: 'app-header',
  templateUrl: './app/components/header/header.component.html',
  directives: [ROUTER_DIRECTIVES]
})
export class AppHeader {
  headerItems: Object[] = [];

  constructor() {
    this.headerItems.push(
      { classes: 'navLink', routerLink: ['/Home'], text: 'Home' }
    );
  }
}

header.component.html

<div id="HeaderRegion">
  <nav class="nav">
    <a *ngFor="let item of headerItems" [routerLink]=" {{item.routerLink}} ">
      {{item.text}}
    </a>
  </nav>
</div>

Answer 1

您不能[]与{{}}前者或后者结合使用

[routerLink]="item.routerLink"

应该做你想做的.

routerLink="{{item.routerLink}}"

将绑定item.routerLink.toString()到该routerLink属性.

Answer 2

您也可以使用以下代码来传递带有一些文本的表达式。

<div *ngFor="let customer of customers">
   <a [routerLink]="'customer/'+customer.index">Link</a>
</div>

Answer 3

此时您可能已经找到答案了，因为我删除了 {{}} 解决了类似的问题。你的代码可能是

<a *ngFor="let item of headerItems" [routerLink]="item.routerLink">
  {{item.text}}
</a>

Answer 4

这样的事情对我们有用：

<input type="checkbox" [id]="['btn.botStepState-'+i]" [(ngModel)]="btn.botStepState" name="btn.botStepState-{{i}}" (change)="changeHandler($event)" class="cbx hidden" />

• 属性绑定，即评估值[]所需的[]
• 模型绑定即[()]不需要什么特别的
• 插值即{{}}可以与一般属性一起使用
• 事件绑定ie()与函数配合很好