directives - directive angular 6 example

Valor de routerLink dinámico del elemento ngFor que da error "Se obtuvo una interpolación({{}}) donde se esperaba la expresión"

Question

Estoy intentando establecer el valor de routerLink en una directiva basada en un conjunto dinámico de elementos del componente. Pero se está lanzando un error desde 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

Algo como esto funcionó para nosotros:

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

• Enlace de propiedad es decir [] requerido [] para evaluar valores
• Modelo de enlace, es decir [()] no requiere nada especial
• Interpolación, es decir, {{}} podría usarse con atributos generales
• Enlace de eventos ie () funcionó muy bien con funciones

Answer 2

No puede usar [] combinado con {{}} ni el anterior ni el posterior

[routerLink]="item.routerLink"

Debes hacer lo que quieras.

routerLink="{{item.routerLink}}"

item.routerLink.toString() a la propiedad routerLink .

Answer 3

Podría haber encontrado la respuesta en este momento, ya que al eliminar {{}} se resolvió el problema similar. Tu codigo podria ser

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

Answer 4

También puede ir con el siguiente código para pasar la expresión con algún texto.

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

~ Manish