ngShow式は

Question

が、私はこのように見える角度成分とコントローラを持っているのは時期尚早評価され

export class MyService { 

    static serviceId = 'myService'; 

    private http: ng.IHttpService; 

    constructor(private $http: ng.IHttpService) { 
     this.http = $http; 
    } 

    public getElements(): ng.IPromise<{}> { 
     return this.http.get('./rest/elements'); 
    } 

} 

私が直面している問題は、アレイということです要素には、onInit（）の呼び出し後に空の配列が含まれています。しかし、後でgetELements（）の成功関数が呼び出され、要素がコンソールに書き込まれてからデータが受信されたことがわかります。私は特定の要素を表示するかどうかを判断するために私のテンプレートで使用さ

要素：

<div> 
    <elements ng-show="vm.elements.indexOf('A') != -1"></elements> 
</div> 

問題は今vm.elementsが最初に空の配列を含むことである、とだけ後で、配列が充填されています実際の値しかし、テンプレート内のこの表現はすでに評価されています。どうすれば変更できますか？

Answer 1

あなたの現在の実装は理にかなっていません。あなたの目標を達成するために、この言語で約束や非同期の構文がどのように機能するかを理解する必要があります。幸いにも、これはあまりにも難しくありません。

現在の実装での問題は、initメソッドがただちに空の配列を返すことです。それはサービスコールの結果を返さないので、コントローラ内のプロパティは、あなたが望んでいない空の配列に再びバインドされます。

ではなく、次の点を考慮

export class MyController { 
    elements: string[] = []; 

    $onInit =() => { 
    this.getElements() 
     .then(elements => { 
     this.elements = elements; 
     }); 
    }; 

    getElements() { 
    return this.elementsService 
     .getElements() 
     .then(response => response.data) 
     .catch(() => { 
     this.errorReceived = true; 
     }); 
    } 
} 

あなたはtry/catch標準の構文を使用することができますどのように上記の注意async/await

export class MyController { 
    elements: string[] = []; 

    $onInit = async() => { 
    this.elements = await this.getElements(); 
    }; 

    async getElements() { 
    try { 
     const {data} = await this.elementsService.getElements(); 
     return data; 
    } 
    catch { 
     this.errorReceived = true; 
    } 
    } 
} 

を活用することで、これは読みやすくすることができます。これはasync/awaitの多くの利点の1つです。

もう1つ注目すべきことは、データサービスがレスポンス（data）をアンラップして、コントローラがHTTPサービスのセマンティクスに関係しないように戻すことです。