Можно ли передать данные из таблицы Angular HTML компоненту, чтобы затем перебрать его строки для обработки?

Question

В настоящее время у меня есть таблица, отображающая список значений с одним полем ввода. Цель состоит в том, чтобы пользователь заполнил поле ввода в каждой строке и затем нажал кнопку «Отправить». Затем мне нужно передать все значения, такие как «Имя действия», «От имени учетной записи», «На имя учетной записи» и соответствующую сумму в переменную в моем component.ts.

Я думаю, что у меня мог бы быть объект массива, который я мог бы циклически проходить для каждой строки.

Пример таблицы:

Activity Name	From Account Name	To Account Name	      Amount
Deposit	        Personal1	        Bank1                 USERINPUT
Withdrawal	    Bank1	        Personal1             USERINPUT
Deposit   	Personal2	        Bank1                 USERINPUT

Моя конечная игра - иметь массив, который я обрабатываю, используя цикл for, например:

  for (i in this.AccountArray) {
    this.databaseService.getData(this.AccountArray[i]).subscribe(
    account_results => this.account_results = account_results
    );
  }

Таким образом, в приведенном выше примере я обработал бы 3 цикла, причем цикл 1 выглядит следующим образом: (Deposit, Personal1, Bank1, 50).

Account.component.html

<form [formGroup]="CmForm" (ngSubmit)="submit()" name="CmForm"  >
<div class="form-group">
    <label for="dateselection">Enter Date you are processing.</label>
    <input type="date" id="dateselection" value="{{ yesterday | date:'yyyy-MM-dd'}}"
    min="2015-01-01" max="{{ yesterday | date:'yyyy-MM-dd'}}" (change)="changedDate($event)"  class="datepicker" />
  <br>
<br>
<br><h3>Cash Movement</h3>
<table  class="responstable"  >
    <tr>

      <th>Activity Name</th>
      <th>From Account </th>
      <th>To Account </th>
      <th>Amount</th>
    </tr>
    <tr *ngFor="let activityresult of activityresults" >
      <td>{{activityresult.Activity_Description}}  </td>
      <td>{{activityresult.From_Account_Name}}  </td>
      <td>{{activityresult.To_Account_Name}}  </td>
      <td><input type="textbox" (change)="changedAmount($event)"></td>
    </tr>
  </table>
<br>
<input type="submit"  value="Submit" /><br><br>
<br><br><br><br>
</div>
</form>

Account.component.ts

import { ActivityResult } from './../database.service';


export class AccountComponent implements OnInit {
  CmForm: FormGroup;
  activityresults: Array<ActivityResult>;

  constructor(
    private databaseService: DatabaseService
  ) {}

  ngOnInit() {
    this.CmForm = new FormGroup({
      'dateselection': new FormControl(null, [Validators.required])
  });
    // returns the starting set of Activities when page is loaded.
    this.databaseService.getActivity().subscribe(
      activityresults => this.activityresults = activityresults
      );
  }

}

database.service.ts

export class ActivityResult {
  Activity_Description: string;
  From_Account_Name: string;
  To_Account_Name: string;
}


getActivity(): Observable<ActivityResult[]> {
  const url = 'http://localhost:3000/a';
  const data = ({
  });
  return this._http.post(url, data)
  .pipe(
    map((res) => {
      console.log(res);
      return <ActivityResult[]> res;
    })
  );

Любой совет будет принят с благодарностью.

Answer 1

Вот рабочий пример:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<table>
    <caption>User actions</caption>
    <thead>
        <tr>
            <th>Activity Name</th>
            <th>From Account</th>
            <th>To Account</th>
      <th>Amount</th>
        </tr>
    </thead>
  <tbody>
    <tr *ngFor="let line of data;">
      <td>{{ line.activity }}</td>
      <td>{{ line.from }}</td>
      <td>{{ line.to }}</td>
      <td><input type="number" [(ngModel)]="line.amount"></td>
    </tr>
  </tbody>
</table>

<button (click)="submit()">Submit</button>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  data = [
    { activity: 'Deposit', from: 'Personal1', to: 'Bank1', amount: 0 },
    { activity: 'Withdrawal', from: 'Bank1', to: 'Personal1', amount: 0 },
    { activity: 'Deposit', from: 'Personal2', to: 'Bank1', amount: 0 },
  ];

  submit() {
    for (let line of this.data) {
      console.log(line);
    }
  }
}

В конце вы можете заменить журнал консоли следующим образом:

Observable.forkJoin(this.data.map(line => this.service.getData(line))).subscribe(results => {
  console.log(results);
});

, который будет вызывать HTTP-вызов для каждой строки в вашемобъект данных.Попробуй, скажи, как у тебя дела.