La valeur dynamique du routerLink de ngFor donnant l'erreur " a obtenu l'interpolation ({{}}) où l'expression était attendue"

j'essaie de mettre le routerLink valeur dans une directive basée sur un ensemble dynamique d'éléments du composant. Mais une erreur est lancée d'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

en-tête.composant.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' }
    );
  }
}

en-tête.composant.html

<div id="HeaderRegion">
  <nav class="nav">
    <a *ngFor="let item of headerItems" [routerLink]=" {{item.routerLink}} ">
      {{item.text}}
    </a>
  </nav>
</div>
28
demandé sur BenR 2016-05-06 20:45:21

4 réponses

Vous ne pouvez pas utiliser [] combinés avec {{}} le premier ou le dernier

[routerLink]="item.routerLink"

Devrait faire ce que vous voulez.

routerLink="{{item.routerLink}}"

lierait item.routerLink.toString()routerLink propriété.

64
répondu Günter Zöchbauer 2018-04-18 13:57:20

Vous auriez pu trouver la réponse à ce moment-là, pour moi enlevant {{}} résolu la question similaire. Votre code pourrait être

<a *ngFor="let item of headerItems" [routerLink]="item.routerLink">
  {{item.text}}
</a>
2
répondu madhav bitra 2017-01-03 15:47:53

quelque Chose comme ce qui a fonctionné pour nous:

<input type="checkbox" [id]="['btn.botStepState-'+i]" [(ngModel)]="btn.botStepState" name="btn.botStepState-{{i}}" (change)="changeHandler($event)" class="cbx hidden" />
  • propriété liant i.e. [][] pour évaluer les valeurs
  • fixation des modèles i.e. [()] ne rien exiger de spécial
  • Interpolation i.e. {{}} peut être utilisé avec des attributs généraux
  • liaison d'Événements i.e. () a travaillé beaucoup avec les fonctions
1
répondu student 2017-06-22 08:28:59

Vous pouvez aussi utiliser le code suivant pour passer l'expression avec du texte.

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

~Manish

1
répondu Manish Kumar Gupta 2018-03-28 13:42:11