来自 ngFor 项目的动态 routerLink 值给出错误“在预期表达式中得到了插值({{}})"； [英] Dynamic routerLink value from ngFor item giving error "Got interpolation ({{}}) where expression was expected"

问题描述

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

例外:模板解析错误:解析器错误:在 AppHeader@5:40 中的 [ {{item.routerLink}} ] 的第 1 列中得到了插值({{}})(<a *ngFor="let item of headerItems" [ERROR ->][routerLink]=" {{item.routerLink}} ">{{item.text}}</a>"): 标题@5:40

header.component.ts

从'@angular/core'导入{Component}；从@angular/router-deprecated"导入{ROUTER_DIRECTIVES}；@成分({选择器:'应用程序头'，templateUrl: './app/components/header/header.component.html',指令:[ROUTER_DIRECIVES]})导出类 AppHeader {headerItems: Object[] = [];构造函数(){this.headerItems.push({ 类:'navLink'，routerLink:['/Home']，文本:'Home' });}}

header.component.html

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

解决方案

[] 不能与 {{}} 结合使用，无论是前者还是后者

[routerLink]="item.routerLink"

应该做你想做的.

routerLink="{{item.routerLink}}"

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

I'm trying to set the routerLink value in a directive based on a dynamic set of items from the component. But an error is being thrown from 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>

解决方案

You can't use [] combined with {{}} either the former or the later

[routerLink]="item.routerLink"

Should do what you want.

routerLink="{{item.routerLink}}"

would bind item.routerLink.toString() to the routerLink property.

这篇关于来自 ngFor 项目的动态 routerLink 值给出错误“在预期表达式中得到了插值({{}})"；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！