typescript - テーブル内の列から値を取得して配列に入れるにはどうすればよいですか?角度のある

次のコード (テーブル) を持つコンポーネントがあります:

expect-next-month.component.html

        <table id="users">
            <tr>
                <th>Number of month</th>
                <th>Total checking electrical units</th>
                <th>Total assembly</th>
                <th>Total soldering</th>
                <th>Total packing</th>
                <th>Total working days in this month</th>
            </tr>
            <tr *ngFor="let sum of totalWorkPerMonth">
                <td>{{sum.number_of_month}}</td>
                <td>{{sum.total_checking_electrical_units}}</td>
                <td>{{sum.total_assembly}}</td>
                <td>{{sum.total_soldering}}</td>
                <td>{{sum.total_packing}}</td>
                <td>{{sum.total_working_days_in_this_month}}</td>
            </tr>
        </table>

目標は、total_packing 列からすべてのデータを取得し、それを検証できる ts ファイル内の配列に入れることです。 (これは int 値を含む列です)。

誰かがそれを行う方法を知っていますか？ ngModel を使用しようとしましたが、実際には機能しませんでした。おそらく正しく書いていないか、配列型の 1 つの変数に対してこの方法ですべての値を取得することは不可能です。 助けていただければ幸いです。ありがとう！

1.マップ関数を使用して、.ts ファイル内の新しい配列でそれを取得できます。

var result = this.totalWorkPerMonth.map(x => x.total_packing)

// apply your verification foreach item from your list:
result.foreach(packing => {
  // do something
}

2.別の方法は、属性にメソッドを適用することです。

<td>{{validateField(sum.total_packing)}}</td>

そしてあなたの .ts:

 validateField(value: int) {
  // do something
  if (value < 0) return 0;
  else return value;
 }

3. 3 番目の解決策は、個人的にこれが最善だと思います。データを取得したときに、結果をレンダリングする前に検証を行います。

コンポーネントにメソッド getData() があり、このフィールドに検証を適用するとします。

getData() {
   service.getData().subscribe(data => {
      data.foreach(row => {
         // do your validation as in example
         if (row.total_packing< 0) {
           row.total_packing = 0;
         }
      }
      this.totalWorkPerMonth = data;
   });
}

3

あなたが書いたようにtsファイルに書き込みました。cosole.logを実行して、配列が実際に満たされているかどうかを確認しようとしましたが、配列は空です。結果= this.totalWorkPerMonth.map(x => x.total_packing); checkButton() { console.log(this.result); }

user13933455

2020 年 9 月 3 日 12:23

最初のメソッドのマップは RxJS オペレーターではなく、Array#map メソッドです。これらは同じように呼ばれますが、まったく異なる目的を果たします。

2020 年 9 月 3 日 12:23

@MichaelD、はい、申し訳ありませんが、ここでのmap()は配列の各要素に適用されるjsメソッドです。

2020 年 9 月 3 日 12:33