角度：テンプレートからクラスまでの変数を操作します

Question

私のテンプレート/コンポーネントデザインで少し問題があります。 この簡単なサンプルを見てみましょう。

import {Component} from "@angular/core"; 

@Component({ 
    selector: "test", 
    template: ` 
    <ul *ngFor="let l of lst"> 
     <li *ngIf="l > 3">{{ l }}</li> 
    </ul> 
    The count is ... 
` 
}) 

export class TestComponent 
{ 
    lst : Array <number> = [1, 3, 5, 9]; 
} 

私のテンプレートにはロジックがあります（すべて表示> 2）。

最後に、いくつのアイテムが画面に表示されていたかを知りたいです。

テンプレート内のロジックをクラス内で共有したくありません。それを処理するための

一つの方法は、テンプレートで（とのみが）クラスのデータの横にロジックを入れて、代わりにすべてのデータを操作の をすでにフィルタリングされたデータを使用してロジックを持つことです そして、それをカウントするのは簡単ですクラス内。

別の方法がありますか？クラスに影響を与えるテンプレート内のカウンタ変数を操作するとしますか？ {{}}で関数を呼び出す際に試しましたが、正しく動作していません。

Answer 1

ビジネスロジックをクラスに実装する必要があります。これは最高の場所であり、ビジネスロジックを1か所に保ち、懸念を最善に解消します。あなたが示唆している代替案を実行しようとすることは何の意味もありません。それは、フープを飛び越えて不必要に物を複雑にすることを意味します。クラスで作業を行うことで、常により多くの制御、柔軟性、スケーラビリティが得られます。この習慣に入るのがベスト。

Answer 2

lstのサブセットであるロジック用の個別のリストを作成します。 次に、コンポーネントクラスにロジックを、テンプレートにプレゼンテーションを配置できます。

import {Component} from "@angular/core"; 

@Component({ 
    selector: "test", 
    template: ` 
    <ul *ngFor="let l of otherList"> 
     <li>{{ l }}</li> 
    </ul> 
    The count is {{otherList.length}} 
` 
}) 

export class TestComponent 
{ 
    lst : Array <number> = [1, 3, 5, 9]; 
    otherList:Array<number> = []; 

    constructor(){ 
    this.doLogic(); 
    } 

    doLogic(){ 
    lst.forEach(item=>{ 
    if(item>3){ 
     otherList.push(item); 
    } 
    }); 
    } 

}