来自 ngFor 项目的动态 routerLink 值给出错误 "Got interpolation ({{}}) where expression was expected"

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

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

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

Answer 3

像这样的东西对我们有用：

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

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

Answer 4

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

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

Answer 5

我有一个如何让你的路线动态化的例子

在您的 html 组件中

<ul class="nav side-menu">
                <li *ngFor="let data of dataPermiso;let i= index">
                  <a><i class="{{data.icono}}"></i> {{data.categoria}} <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li *ngFor="let item of data.permisoList;let a = index">
                      <a [routerLink]="item.ruta">{{item.titulo}}</a>
                    </li>
                  </ul>
                </li>
</ul>

在你的组件中 ts

  public dataPermiso:any[] = [];

  constructor(private loginserv: LoginService) {
    this.loadPermiso();
  }



  ngOnInit() {

  }

  public loadPermiso(){
    this.loginserv.listPermisos(this.dataStorage.idrol).subscribe((data)=>{
      this.dataPermiso= data;
    });
  }

Answer 6

如果你想通过从 ngFor 获取动态值来创建路由器 link，你可以使用下面的例子

<div *ngFor = "let item of items"> 
<a [routerLink] = "['./item-details/' + item.id]">{{item.name}}</a></div>

也就是说，只需将您收到的值附加到您要导航的 url。

来自 ngFor 项目的动态 routerLink 值给出错误 "Got interpolation ({{}}) where expression was expected"

Dynamic routerLink value from ngFor item giving error "Got interpolation ({{}}) where expression was expected"

angular2-directives

angular