Question

我是新手。我正在尝试创建新行。

我正在尝试在表单中添加一个新目标，该目标又包含步骤，当我创建新目标时，我将继续执行新步骤。

但是当我继续创建一个新目标时，它将显示我为先前目标创建的步骤。我在创建表单步骤时遇到问题。有人可以给我指出正确的方向吗？

Answer 1

这是因为您只有一个stepsArray，并且每个目标都显示了这一点。您的模型应如下所示：

objectives = [{
  name: string,
  steps: [
    actionstep: string,
    completionDate: Date,
    wwmonitor: string,
    hwmonitor: string
  ]
}]

当用户单击添加目标时，应将新对象推入目标。当用户单击添加步骤时，应将一个新对象推入该目标步骤。在模板中，您应该像这样进行迭代：

*ngFor="let objective of objectives
    display data for objective
    *ngFor="let step of objective.steps"
        display data for step

Answer 2

我阅读了您的代码。首先要澄清一下自己，您应该尽量使变量名接近其真实含义。例如，stepsArray是个好名字，但fieldArray应该称为ObjectiveArray。

其次，关于您的代码结构。如我所见，您可以有“许多目标”，而那些目标可以有“许多步骤”。您的模型应该“反映”这一点。因此，在您的代码中，您应该只有一个数组，一个目标数组：

像这样：一个目标有一个名称和步骤列表。

objectives: Array<{name : string, steps: Array<any>}> = [];

我键入了任何Array的步骤，但可以键入更多

Array<{ wwmonitor : string, hwmonitor : string, ...>}

如何添加目标？（旧的addFieldValue）

addNewObjective() {
      this.objectives.push({ name : '', steps : []});
  }

如何添加步骤？

  addStepsValue(objective) {      
      objective.steps.push({}); 
  }

我让你想象“删除”：D

管理您的html：

      <table>
        <tbody *ngFor='let objective of objectives; let i = index'>
          <tr>
            <td>Objective</td>
          </tr>
          <tr>
            <td >
              <div class="input-group">
                <input class="form-control py-2 " type="text" [(ngModel)]="objective.name" [attr.name]="'objective'-i">

                <span class="g-float-right">
                    <button (click)="deleteFieldValue(i)">delete obj</button>
                </span>

                <span class="g-float-right">         
                     <button (click)="addStepsValue(objective)">add Steps</button>
                </span>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <table class="table table-bordered table-hover u-table--v1 mb-0">
                <thead>
                  <tr>
                    <th>Step</th>
                    <th>Completion Date</th>
                    <th> Monitor</th>
                    <th>hmonitored?</th>
                    <th class="text-right">ACTION</th>
                  </tr>
                </thead>
                <tbody  *ngFor='let step of objective.steps; let z = index'>
                  <tr >
                    <td><input class="form-control" type="text" [attr.id]="'fld1' + z" [(ngModel)]="step.actionstep"></td>
                    <td><input type="text" class="form-control rounded-0 form-control-sm" placeholder="mm-dd-yyyy" [(ngModel)]="step.date"></td>
                    <td><input class="form-control" type="text"[(ngModel)]="step.wwmonitor"></td>
                    <td><input class="form-control" type="text"[(ngModel)]="step.hwmonitor"></td>
                    <td class="text-right">
                        <button (click)="deleteStepsValue(objective, z)">delete steps</button>
                    </td>
                  </tr>
                </tbody>
              </table>

角动态添加一行

2 个答案: