web-dev-qa-db-ja.com

ngFor変数をngIfテンプレートに渡す

Then/else構文でテンプレートを使用している場合、ngForループで現在の変数をngIfに渡すにはどうすればよいですか？

インラインで使用すると問題なく通過するようですが、テンプレートからはアクセスできません。次に例を示します。

<ul *ngFor="let number of numbers">
  <ng-container *ngIf="number % 2 == 0; then even_tpl; else odd_tpl"><>/ng-container>
</ul>


<ng-template #odd_tpl>
  <li>Odd: {{number}}</li>  
</ng-template>

<ng-template #even_tpl>
  <li>Even: {{number}}</li>  
</ng-template>

テンプレートはnumberにアクセスできないようですが、インラインで使用すると機能します。

次のリンクにある、動作しているバージョンと動作していないバージョンの完全な例： plunkr

angularngforangular-ng-ifng-template
13
match

必要なのは[ngTemplateOutletContext]続きを読む

これを実現する方法は次のとおりです。

<div>
  <h3>All Templates</h3>
  <ul *ngFor="let number of numbers">
    <ng-container [ngTemplateOutlet]='number % 2 == 0 ? even_tpl : odd_tpl' [ngTemplateOutletContext]="{number:number}"></ng-container>
  </ul>
</div>

<ng-template #odd_tpl let-number='number'>
  <li>Odd: {{number}}</li>  
</ng-template>

<ng-template #even_tpl let-number='number'>
  <li>Even: {{number}}</li>  
</ng-template>

WORKING DEMO

12
Vivek Doshi

ここを見て： Pass variable in Angular 2 template

<div *ngFor="foo in foos">
    <ng-container *ngTemplateOutlet="inner; context:{name:foo}"></ng-container>
</div>
<ng-template #inner let-name="name">
    {{ name }}
</ng-template>
2
Guntram

これは、テンプレートスコープのしくみによるものです。 Angularのテンプレートには、通常のJavaScript字句スコープではなく動的スコープがあります。つまり、{{ number }}内のng-template式は、*ngFor内の同じnumber変数を指していません。あなたはちょっと評価中<ng-container>があるテンプレート式です。

numberで実際にAppComponentプロパティを定義している場合、たとえばnumber = 42とすると、{{number}}内のすべての<ng-template>式が42に評価されることがわかります。

したがって、number変数に目的の値が含まれる*ngForのスコープ内でテンプレートを定義するか、何らかの方法でこの値をeven_tplとodd_tplの両方に渡す必要があります。 @Vivekが指摘したように、これはngTemplateOutletとngTemplateOutletContextで行うことができます。

0
Osman Cea

複数の引数のいくつかの（類似した）オプションを次に示します。これには、「ngTemplateOutletContext」と条件（4番目の引数-楽しみのため）の使用も含まれます。

...コピー＆ペーストで動作するはずです...

            <!-- DEMO using: 
                "=templateID; context:{prop:value, ...}"
                ( 4 arguments demo)
                Note: $implicit identifies the default argument in the template.
                        The template does not need to assign the argument name,
                        - see the 3rd argument
            -->
    <div *ngFor="let item of ['Aaa', 'Bbb', 'Ccc']; index as ix">
        <ng-container *ngTemplateOutlet="myTemplate1; 
                    context:{cDemoName:'Option 1:',
                             cIx:ix+1, 
                             $implicit:item, 
                             cIsEven: ((ix % 2) === 0) ? 'true' : 'false' }">
        </ng-container>
    </div>

    <hr>

            <!-- DEMO using: 
                [ngTemplateOutlet]="templateID"
                [ngTemplateOutletContext]="{"=templateID; context:{prop:value, ...}"
            -->

    <div *ngFor="let item of ['Dddd', 'Eee', 'Fff']; index as ix">
        <ng-container [ngTemplateOutlet]="myTemplate1"
                      [ngTemplateOutletContext]="{
                        cDemoName:'Option 2',
                        cIx:ix+1, 
                        $implicit:item, 
                        cIsEven: ((ix % 2) === 0) ? 'true' : 'false' }
                    ">
        </ng-container>
    </div>

            <!-- DEMO template: 
                ( 4 arguments expected)
            -->
    <ng-template #myTemplate1 
            let-cDemoName="cDemoName"
            let-cIx="cIx"
            let-cItem
            let-cIsEven="cIsEven">

        Context arguments demo name: {{cDemoName}} <br>
        . . . . . Context index: {{cIx}} <br>
        . . . . . Context item: --- {{ cItem }} --- <br>
        . . . . . Context is-even: {{ cIsEven }} <br>
        <br>
    </ng-template>
0
Felix