角4：約束を返す方法に一度だけバインドしてください

Question

私は角に新しいですので、私が覚えていない場合は私には正しい用語を使用してください。

私はメソッド呼び出しにtdデータをバインドすることによってテーブルを動的に作成しようとしています。このように：

<tbody> 
    <tr *ngFor="let rw of ParameterRowData" > 
    <td *ngFor="let field of fields" class="lalign" [innerHTML]="getCellData(field, rw.ParameterData)" ></td> 
    <td><a >Edit</a> </td> 
    </tr> 
</tbody> 

これは、使用可能な列とデータがサーバーから返されるまでわからないためです。私の問題は、getCellDataメソッドが繰り返し呼び出されていることです。ブラウザはフリーズしますが、コンソールでは何度も何度も呼び出されています。私はそれを一度呼びたいだけです。

次のようにgetCellData方法は次のとおりです。

getCellData(field: ParamField, fields : ParameterRowFieldContract[]) : Promise<string> 
    { 
     for(var i=0; i<fields.length; i++) 
     {   
      if(fields[i].Name===field.DisplayName) 
      { 
       console.log('a'); 
       if(field.DataType == "FOREIGNKEYLIST") 
       { 
        //getforeign key value to display 
        console.log('b'); 
        var value = this.paramService.getParameterDataWithId(field.ForeignParameter, fields[i].Value) 
        .then(para => {  
         for(var k=0; k<para.ParameterData.length; k++) 
         { 
          console.log('c'); 
          if(para.ParameterData[k].Name===field.ForeignField) 
          { 
           console.log('foreign ='+ para.ParameterData[k].Value); 
           return para.ParameterData[k].Value; 
          } 
         } 
        }); 
        return value; 

       } 
       else 
       {    
        return Promise.resolve(fields[i].Value); 
       } 
      }  
     } 
    } 

私はちょうどHTMLのtd要素にサービスから返された値を表示したい日の終わりに。私はこの問題を解決するための代替ルートを用意しています。データがテーブルにロードされると、データは編集されませんが、一方向バインディングが役立つかどうかわかりませんし、一方向または双方向バインディングの実装方法もまだ理解していません。

ありがとうございました。

Answer 1

解決策の解決策が見つかりました。

まず第一に、私は約束を返す表現にバインドしていました。このリンクAngular Docsでは、角度のチームはここに複雑なepressionsの使用を思いとどまら：

式は、（）からgetfooのようなものを呼び出すことができます。あなただけがgetFoo（）が何をしているか知っています。 getFoo（）が何かを変更して、何かにバインドされた場合、あなたは不愉快な経験をする危険があります。 Angularは変更された値を表示することもあれば表示しないこともあります。 Angularが変更を検出して警告エラーを表示することがあります。一般に、データプロパティと、値を返し、それ以上は返さないメソッドに固執する。

したがって、私のメソッドは文字列を返す必要がありました。

外国のデータは、ngOnInitでプリフェッチし、外国人の多次元配列（2D）に格納しました。

foreigners = []; 
foreignParamNames : string[]; 

次にngOnInitにデータを入力します。 foreignParamNamesは、マルチデセンシオン配列のインデックスを追跡することです。その後、

ngOnInit() { 
this.foreigners = []; 
this.foreignParamNames = []; 
this.fields = this.param.Fields; 
this.paramService.getParameterData(this.parameterName) 
       .then(
        data => this.processData(data), 
        error => {console.log(error)}); 

var foren = this.fields.filter(a=> a.DataType == 'FOREIGNKEYLIST'); 
for(var i = 0; i< foren.length; i++) 
{ 
    this.foreignParamNames.push(foren[i].DisplayName); 
    this.foreigners.push([]); 
} 

for(var j =0; j< foren.length; j++) 
{ 
    var that = this; 
    var ogfield = foren[j]; 
    //get foreign field data 
    this.paramService.getParameterData(foren[j].ForeignParameter) 
       .then(
        foreignRows => { 
         var values : StringKeyValuePair[] 
         values =[]; 
         for(var i=0; i<foreignRows.length; i++) 
         { 
          var foreignFields = foreignRows[i].ParameterData; 
          var sk = new StringKeyValuePair(); 
          for(var j =0; j<foreignFields.length; j++) 
          { 
           if(foreignFields[j].Name=="Id") 
           { 
            sk.Key = foreignFields[j].Value; 
           } 
           if(foreignFields[j].Name==ogfield.ForeignField) 
           { 
            sk.Value = foreignFields[j].Value; 
           }   
          } 
          values.push(sk); 
         } 
         var ii = that.foreignParamNames.indexOf(ogfield.DisplayName); 
         if(ii>=0) 
         { 
          that.foreigners[ii]=(values); 
         } 
        }, 
        error => {console.log(error)}); 
    } 
} 

、最終的には、getCellData方法は、もはやサービスからフェッチする必要はありませんが、今はそのデータの多次元配列からフェッチすることができます。ここにコードがあります。

getCellData(field: ParamField, fields : ParameterRowFieldContract[]) : 
string 
{ 
    for(var i=0; i<fields.length; i++) 
    {   
     if(fields[i].Name==field.DisplayName) 
     { 

      if(field.DataType == "FOREIGNKEYLIST") 
      { 
       //getforeign key value to display     
       var ii = this.foreignParamNames.indexOf(field.DisplayName); 

       var foreignfields= <StringKeyValuePair[]>this.foreigners[ii]; 

       for(var k=0; k<foreignfields.length; k++) 
       { 
        if(foreignfields[k].Key===fields[i].Value) 
        { 
         return foreignfields[k].Value; 
        } 
       } 

      } 
      else 
      {    
       return fields[i].Value; 
      } 
     }  
    } 
    return "N/A"; 
    } 

HTMLテンプレートのコードは変わりません。これが必要な人を助けることができれば幸いです。これは私の元の考え方の代替品に似ていますが、誰かがより良い方法を持っている場合は、お気軽にお気軽に