2016-10-25 6 views
0

私はこのエリアでちょっと緑ですので、私と一緒に裸にしてください。どのように私はES6の "クラス"機能を使ってデータを渡すのですか

私はES6クラスとして角度のコントローラを作成しようとしています。期待どおりに動作します(メッセージ関数から返された文字列を出力することができます)。下記参照。

<div ng-controller="ProfilingCtrl as profileData"> 
    {{profileData.message()}} 
</div> 

しかし、私は今、以下のようにng-repeatで関数クラスを使用できるようにしたいと考えています。

<div ng-controller="ProfilingCtrl as profileData"> 
    <div ng-reapeat="x in profileData.getData()"> 
     {{x[0]}} 
    </div> 
</div> 

getData()は文字列の配列を返す関数です。これも可能ですか?もしそうでなければ、そのような操作をどうやって行うのでしょうか?

ありがとうございます。

+0

コントローラはクラスですか?もしそうなら、getData()から返された配列を$ scope.data = []のようなスコープ配列に入れてから、ビュー上でdo ng-reapeat = "x in data"を入力してください –

+0

通常、 'x'は1つのエントリ'profileData.getData()'によって返された配列の配列を返します。そのように、私は '{{x [0]}}'をなぜ表示しようとしているのか分かりません。 '{{x}}'を試してください。 – FDavidov

答えて

3

あなたの問題はng-reapeatから届いています - >タイプはng-repeatである必要があります。あなたのコードをお手伝いしています:

コントローラコードを共有していると便利です。しかし、私は何かを作るでしょう。

最初に、データ配列内の各文字列の最初の文字を表示しようとしている場合を除き、xは反復の結果の要素を表すため、[0]を削除します。

<div ng-controller="ProfilingCtrl as profileData"> 
    <div ng-repeat="x in profileData.getData()"> 
     {{x}} 
    </div> 
</div> 

さらに推奨:関数ではなく変数にデータをバインドすることをお勧めします。 (まだ私はコントローラ用の関数に固執していますが)

class MyController { 

    constructor(myDataService) { 
    this.myDataService = myDataService; 

    this.myData = []; // This is where the data will be 
    } 

    handleError(error) { 
    // do something error 
    } 

    getData() { 
    this.myDataService.getData() // this is some method that returns a promise 
     .then(response => this.myData = response) // response from http in a promise 
     .catch(error => this.handleError(error)); 
    } 

    $onInit() { // angular will take care of starting this off 
    this.getData(); 
    } 

} 

$ onInitは、コンポーネントの準備ができたらAngularで呼び出されます。ライフサイクルフックについて読む:https://toddmotto.com/angular-1-5-lifecycle-hooks

ライフサイクルフックは質問の範囲外ですが、まだ入りやすいです。

「これを$scopeにバインドする」という以前のコメントはお勧めできません。 ControllerAsはあなたがやっている方が良いですが、後で別の場所に置くことができます。

+0

ありがとうございました。私はES6が新しいisch-lyであることを知っています。したがって、以前の方法に関連して私が見つけた情報の大半。これにより、新しいアプローチに関するより多くの指示が得られました。どうもありがとう。 PS:唯一の問題ではなく、タイプミスが問題の一部でした。ありがとう。 –

関連する問題