* ngIfで関数を使用して無限ループになる角度2

Question

私はAngular2/4でページのレンダリング時にファイルをチェックし、ファイルが存在する場合はチェックボックスアイコンを表示します存在すると、ダウンロードアイコンが表示されます。しかし、それは無限ループに陥るので、ブール変数を使用することをお勧めしますが、私の要素は動的であり、任意の数のダウンロードリンクが存在する可能性があるので、あらかじめ定義された変数はオプションではありません。

Angular2コード

<div *ngFor="let item of getItems();"> 
    <div ngIf="fileExists(item.url); then example2 else example1"></div> 
    <ng-template #example1> 
    <ion-icon class="myicon" name="download" color="primary"></ion-icon> 
    </ng-template> 
    <ng-template #example2> 
    <ion-icon class="myicon" name="checkbox" color="secondary"></ion-icon> 
    </ng-template> 
</div> 

活字体機能ファイルは、それが無限ループではありません

fileExists(url) 
{ 
    let path = "notif/"+url.substr(url.lastIndexOf('/')+1); 
    this.file.checkFile(this.file.externalRootDirectory, path).then(_ => { 
    console.log('File exists');  
    return true; 
    }).catch(err => { 
    console.log(err); 
    return false; 
    }); 
} 

Answer 1

ここでは、方法fileExists(url)から何も返されません。何がtrue/falseであるかは、コールバックハンドラの内側にあり、呼び出し側関数（ここではPromise）に返されます。だから、呼び出しfileExists(url)は常にvoidを取得し、あなたがngIfに単純な関数を使用することができます

fileExists(url) { 
    let path = "notif/"+url.substr(url.lastIndexOf('/')+1); 
    this.file.checkFile(this.file.externalRootDirectory, path).then(_ => { 
    console.log('File exists'); 
    return true; // "true" returned by this success callback, not "fileExists()" 
    }).catch(err => { 
    console.log(err); 
    return false; // "true" returned by this error callback, not "fileExists()" 
    }); 
} 

falseとして評価されていますが、それは正しく返すことを確認する必要があります。上記の例では今

、プロミスはプロミスは角 Zone.jsによりサルパッチさそのまま 変化検出をトリガすることができるものです。

---

あなたは私にいくつかのヒントを与えることができます https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

Answer 2

が存在するかどうかを確認してください。 Angularランが検出を変更するたびに、バインディング内の式が評価されます。これは、関数が頻繁に呼び出されることを意味します。

コンポーネントテンプレートの関数へのバインドは、通常、Angularでは悪い考えです。代わりに、関数呼び出しの結果をフィールドに代入し、このフィールドにバインドします。