web-dev-qa-db-ja.com

Angular2のng-switch

angular 2（現在はバージョンアルファ26）で遊んでいます。たとえばng-forとng-ifは正常に機能していますが、ng-switchに問題があります。機能させることができません。つまり、何も印刷されません。テンプレート全体が無視されているように見えます。

これは私のコンポーネントからのコードであり、 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;
}

基本的には、nameプロパティを持つアイテムを挿入する単純なコンポーネントです。 nameプロパティには実際に値があり、<span>You selected {{item.name}},</span>行が正常に機能していることがわかります。

なぜそれが機能しないのかわかりません。私の理解から、すべてが正しいはずです。 githubのangularリポジトリ、 ユニットテスト など）と比較しました。

これらは私がチェックしたものであり、私は大丈夫だと信じています：

  • NgSwitchはdirectivesを介してインポートおよび挿入されます
  • 構文は正しい
  • itemは実際に利用可能です（ただし、NgSwitchのコンテキストではない可能性がありますか？）

念のため、次のテンプレート（ハードコードされた文字列または数値の切り替え）のような些細なことも試しました。

<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>

そして、これも機能しないので、私が間違っているのは本当に基本的なことであるに違いありません。インターネット上で例やコードスニペットを見つけることができないのではないかと心配しています。よろしくお願いします。

typescriptangularng-switch
11
PzYon

NgSwitchWhenとNgSwitchDefaultをインポートする必要があり、これらをインポートステートメントに追加します

11
unobf