2016-05-05 8 views
3

私はこれでかなりの時間の間これを困惑しました。あなたの誰かが私が間違っていることを教えてくれる時です:)Angular2(2.0.0-beta.17)NgSwitchWhenに「TemplateRefのプロバイダがありません!」と表示されます。

以下のコンポーネントは、 'No TemplateRefのプロバイダなし'で失敗します。プランターはhereです。 ngSwitchの構文は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!)' 
    } 
} 

答えて

9

あなたは暗黙の<template>で短い構文を使用している場合は、*

@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!)' 
    } 
} 

を追加する必要もNgSwitch directive

+1

マイヒーローを参照してください!私はすでに[..]と* ..のさまざまな組み合わせを試していましたが、あなたが提案したものではありません:)私は今Anger2を学んでいるので、明示的かつ暗黙的に