Valeur de routerLink dynamique de l'élément ngFor donnant l'erreur "Interpolation obtenue ({{}}) où l'expression était attendue"

Question

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

Vous ne pouvez pas utiliser [] combiné avec {{}} ni l'ancien ni le dernier

 [routerLink]="item.routerLink"
 

Devrait faire ce que tu veux.

 routerLink="{{item.routerLink}}"
 

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

Answer 2

Vous pouvez également utiliser le code suivant pour transmettre l'expression avec du texte.

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

~ Manish

Answer 3

Quelque chose comme ça a fonctionné pour nous:

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

• Liaison de propriété c.-à-d. [] requis [] pour évaluer les valeurs
• Liaison de modèle, c.-à-d. [()] requis rien de spécial
• L'interpolation c.-à-d. {{}} pourrait être utilisée avec des attributs généraux
• La liaison d'événement, c'est-à-dire () fonctionnait très bien avec les fonctions

Answer 4

Vous auriez pu trouver la réponse à ce moment-là, car la suppression de {{}} a résolu le problème similaire. Votre code pourrait être

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