2016-05-05 9 views
3

Ich bin jetzt für ein paar Stunden davon ratlos gewesen. Es ist Zeit für einen von euch, mir zu sagen, was ich falsch mache :)Angular2 (2.0.0-beta.17) NgSwitchWenn "Kein Provider für TemplateRef!"

Die folgende Komponente scheitert mit 'Kein Anbieter für TemplateRef!'. Ein Plünderer ist verfügbar here. Ich habe die ngSwitch-Syntax von here.

import {Component} from '@angular/core' 
//This should make the NgSwitch family available, right? 
import {CORE_DIRECTIVES} from '@angular/common' 
// I get same result with explicit import 
// import {NgSwitch,NgSwitchWhen} from '@angular/common' 

@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <div [ngSwitch]="switchValue"> 
     <div ngSwitchWhen="42">It's 42!</div> 
     <div ngSwitchWhen="21">It's 21!</div> 
     </div> 
    </div> 
    `, 
    directives: [CORE_DIRECTIVES] 
    // directives: [NgSwitch,NgSwitchWhen] 
}) 
export class App { 
    switchValue = 42; 
    constructor() { 
    this.name = 'Angular2 (Release Candidate!)' 
    } 
} 

Antwort

9

Wenn Sie die kurze Syntax mit impliziten <template> benötigen Sie *

@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <div [ngSwitch]="switchValue"> 
     <div *ngSwitchCase="42">It's 42!</div> 
     <div *ngSwitchCase="21">It's 21!</div> 
     <!-- before RC.2 
      <div *ngSwitchWhen="42">It's 42!</div> 
      <div *ngSwitchWhen="21">It's 21!</div> 
     --> 
     </div> 
    </div> 
    `, 
}) 
export class App { 
    switchValue = 42; 
    constructor() { 
    this.name = 'Angular2 (Release Candidate!)' 
    } 
} 

Siehe auch NgSwitch directive

+1

Mein Held hinzuzufügen! Ich habe bereits verschiedene Kombinationen von [..] und * .. ausprobiert, aber nicht die, die du vorgeschlagen hast :) Ich lerne gerade eckig2, also habe ich mich nicht ganz mit dem expliziten und impliziten