2015-06-09 18 views
10

Sto giocando con angular 2 (attualmente con la versione alpha 26). ng-for e ng-if per esempio stanno funzionando bene. Tuttavia, ho problemi con ng-switch. Non riesco a farlo funzionare, cioè non viene stampato nulla. Sembra che l'intero modello sia ignorato.ng-switch in Angular2

Questo è il codice della mia componente, che può anche essere trovato su github:

import {Item} from "js/types/item"; 
import {Component, View, NgFor, NgIf, NgSwitch} from "angular2/angular2"; 

@Component({ 
    selector: "item-details", 
    properties: [ 
     "item" 
    ] 
}) 
@View({ 
    template: `<span>You selected {{item.name}},</span> 
       <span [ng-switch]="item.name"> 
       <template [ng-switch-when]="'Bill'"> 
        <span> who is often called Billy.</span> 
       </template> 
       <template [ng-switch-when]="'Bob'"> 
        <span> who is often called Bobby.</span> 
       </template> 
       <template [ng-switch-default]"> 
        <span>who has no nickname.</span> 
       </template> 
       </span> 
       <div *ng-if="item.subItems"> 
       <h2>Sub items:</h2> 
       <ul> 
        <li *ng-for="#subItem of item.subItems">{{subItem.name}}</li> 
       </ul> 
       </div>`, 
    directives: [NgFor, NgIf, NgSwitch] 
}) 
export class ItemDetailsComponent { 
    item:Item; 
} 

In sostanza si tratta di un semplice componente in cui mi inietto un oggetto che ha una proprietà name. La proprietà name ha davvero un valore, che posso vedere come la linea <span>You selected {{item.name}},</span> funziona correttamente.

Non so, perché non funziona. Dalla mia comprensione tutto dovrebbe essere corretto. Ho confrontato con il repo angolare su GitHub, il unit tests, ecc

Queste sono le cose che ho controllato e credo che sono ok:

  • NgSwitch viene importato e iniettato attraverso directives
  • sintassi è corretta
  • item è disponibile davvero (ma forse non nel contesto di NgSwitch?)

Giusto per essere veramente sicuri, ho anche provato qualcosa di banale come modello seguente (commutazione una stringa hard-coded o un numero):

<span [ng-switch]="'foo'"> 
<template [ng-switch-when]="'foo'"> 
    <span> who is often called foo.</span> 
</template> 
<template [ng-switch-when]="'bar'"> 
    <span> who is often called bar.</span> 
</template> 
</span> 

E questo non funziona nemmeno, quindi deve essere qualcosa davvero di base che sto facendo male ... ho paura di trovare esempi o frammenti di codice su internet. Qualsiasi aiuto sarebbe apprezzato, grazie in anticipo.

risposta

10

è necessario importare NgSwitchWhen e NgSwitchDefault, aggiungere queste le dichiarazioni di importazione

+0

Grandi, il gioco è fatto. Grazie mille, non l'avrei mai trovato .. Ma ha senso! – PzYon

+0

dove importare quelli? –