如何以角度遍历表格以获得表格内容

Question

我是新手，尝试学习angular 6。我想要的是单击“添加问题”按钮时在以下字段中获取填充数据。

我可以获得问题和问题类型的数据，但是如您所见，选项的数量可以变化。单击加号按钮时会添加一个新的选项字段，单击减号按钮时可以删除一个。

表中的选项行有三列，第一列具有单选或复选框，第二列具有输入框，第三列具有加号和减号按钮。

如何从组件的选项输入字段中获取这些选项值？

下面是代码文件

compose-survey.component.ts

<div class="col-sm-6 border">
              <div class="form group row px-4 pt-4 pb-2">
                <div class="form-group">
                  <label for="surveyQuestion">Question</label>
                  <input type="text" class="form-control" style="width:500px;" 
                    id="surveyQuestion" 
                    placeholder="Enter your question" 
                    (change)="onQuestionInputChange()" #questionInput>
                </div>
                <div class="form-group">
                  <label for="surveyQuestionType">Question Type</label>
                  <select class="form-control" id="surveyQuestionType" 
                    name="surveyQuestionType" [(ngModel)]="surveyQuestionType" 
                    (change)="onQuestionTypeChange()">
                    <option value="Text">Text</option>
                    <option value="Multiple Choice">Multiple Choice</option>
                    <option value="Checkboxes">Checkboxes</option>
                  </select>
                </div>
              </div>
              <hr>
              <div class="form group row px-4 pt-2 pb-4">
                <table *ngIf="surveyQuestionType != 'Text'" #optionsTable>
                  <tr *ngFor="let row of rowCount">
                    <td *ngIf="surveyQuestionType === 'Multiple Choice'">
                      <input type="radio" disabled>
                    </td>
                    <td *ngIf="surveyQuestionType === 'Checkboxes'">
                        <input type="checkbox" disabled>
                    </td>
                    <td class="px-4">
                      <input type="text" class="form-control" style="width: 400px;" 
                        placeholder="Enter an answer choice">
                    </td>
                    <td>
                      <button class="addOptionButton" (click)="addNewOptionRow()">
                        <img src="/assets/plus-2x.png" alt="icon name">
                      </button>
                    </td>
                    <td *ngIf="rowCount.length > 1">
                      <button class="addOptionButton" (click)="deleteNewOptionRow(row)">
                        <img src="/assets/minus-2x.png" alt="icon name">
                      </button>
                    </td>
                  </tr>
                </table>
              </div>
              <div class="form group row pb-4">
                <div class="col"></div>
                <div class="col">
                    <button type="button" 
                      class="btn btn-primary">Add Question</button>
                </div>
              </div>
            </div>

compose-survey.component.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { User } from '../../data-model/User';
import { SurveyService } from '../survey.service';

@Component({
  selector: 'app-compose-survey',
  templateUrl: './compose-survey.component.html',
  styleUrls: ['./compose-survey.component.css']
})
export class ComposeSurveyComponent implements OnInit {

  surveyQuestionType = 'Text';
  deliveryDateTime = 'Send Now';

  rowCount: number[] = [];
  users: User[];

  constructor(private surveyService: SurveyService) { }

  ngOnInit() {
    this.rowCount = [1];
    this.fetchUsers();
  }

  onSubmit() {

  }

  onQuestionTypeChange() {
    if(this.surveyQuestionType === 'Text') {
      this.rowCount = [1];
    }
  }

  addNewOptionRow() {
    let id: number = this.rowCount[this.rowCount.length-1] + 1;
    this.rowCount.push(id);
  }

  deleteNewOptionRow(value) {
    var index = this.rowCount.indexOf(value);
    this.rowCount.splice(index, 1);
  }

  onQuestionInputChange() {

  }

  private fetchUsers() {
    this.surveyService.getPfivaUsers()
      .subscribe(
        (users: User[]) => this.users = users,
        (error) => console.log(error)
      );
  }

}