javascript - 无法呈现在运行时动态设置的集合

Question

我有一段 JSON，代表用户可以设置的一些操作和参数。

我想在下拉列表中显示操作，当用户选择一个操作时 - 显示与该操作关联的必需参数。

示例:

• 用户选择带有单个参数的 Action ，显示单个输入框
• 用户选择一个带有两个参数的 Action ，显示两个输入框。

我几乎让它工作了，但是 *ngFor 没有显示所选操作的输入:

在 onChange 中 - 如果我打印 this.steps，我可以看到 this.steps[i].SelectedAction.UIParameters 有一个值所以我不确定为什么它没有被渲染。

JSON:

[
  {
    "ActionEnum": "CLICKELEMENT",
    "Name": "Click Element",
    "UIParameters": [
      {
        "ParameterEnum": "ELEMENTID",
        "Description": "The id of the element to click"
      }
    ]
  },
  {
    "ActionEnum": "INPUTTEXT",
    "Name": "Input Text",
    "Description": "Enters text into the element identified by it's id",
    "UIParameters": [
      {
        "ParameterEnum": "ELEMENTID",
        "Description": "The id of the element"
      },
      {
        "ParameterEnum": "TEXTVALUE",
        "Description": "The text to enter into the element"
      }
    ]
  }
]

typescript :

import { Component, Output, EventEmitter, OnInit } from "@angular/core";
import { ActionService } from "../services/action-service";
import { Action } from "../models/Action";

@Component({
  selector: 'app-scenario-step-editor-component',
  template: `
  <form #formRef="ngForm">
    <div *ngFor="let step of steps; let in=index" class="col-sm-3">
      <div class="form-group">
        <label class="sbw_light">Action:</label><br />
        <select (change)='onChange()' [(ngModel)]="step.Action" name="action_name_{{in}}">
            <option *ngFor="let action of this.availableActions" [(ngModel)]="steps[in].value" name="action_name_{{in}}" class="form-control" required>
              {{action.Name}}
            </option>
        </select>
        <div *ngIf="steps[in].SelectedAction">
          <label class="sbw_light">Parameters:</label><br />

          <ng-template *ngFor="let parameter of steps[in].SelectedAction.UIParameters">
            <label class="sbw_light">{{parameter.ParameterEnum}}</label><br />
            <input (change)='onChange()' type="text" [(ngModel)]="steps[in].Parameters" name="parameter_name_{{in}}" class="form-control" #name="ngModel" required />
          </ng-template>

        </div>
      </div>
    </div>

    <button id="addStepBtn" type="button" class="btn btn-light" (click)="addScenarioStep()">Add Scenario Step +</button>
  </form>`
})

export class ScenarioStepEditorComponent implements OnInit {
  @Output() onSelectValue = new EventEmitter<{stepInputs: any[]}>();

  steps = [];
  availableActions: Action[];

  constructor(private actionService: ActionService) {}

  ngOnInit(): void {
    this.actionService.list().subscribe( result => {
      this.availableActions = result;
    },
    error => console.log('Error getting actions...') );
  }

  /* When user picks an option, save the chosen action with the rest of the parameters*/
  onChange() {
    for (let i = 0; i < this.steps.length; i++) {
      let actionIndex = this.availableActions.findIndex(a => a.Name === this.steps[i].Action);
      this.steps[i].SelectedAction = this.availableActions[actionIndex];
    }
    this.onSelectValue.emit( {stepInputs: this.steps} );
  }

  addScenarioStep() {
    this.steps.push({value: ''});
  }
}

Answer 1

<ng-template *ngFor="let parameter of steps[in].SelectedAction.UIParameters">
            <label class="sbw_light">{{parameter.ParameterEnum}}</label><br />
            <input (change)='onChange()' type="text" [(ngModel)]="steps[in].Parameters" name="parameter_name_{{in}}" class="form-control" #name="ngModel" required />
          </ng-template>

只需将 ng-template 替换为 ng-container:

<ng-container *ngFor="let parameter of steps[in].SelectedAction.UIParameters">
            <label class="sbw_light">{{parameter.ParameterEnum}}</label><br />
            <input (change)='onChange()' type="text" [(ngModel)]="steps[in].Parameters" name="parameter_name_{{in}}" class="form-control" #name="ngModel" required />
          </ng-container>

原因:

• ng-container 适合这种情况。它只包含“某物”并且可以迭代。
• ng-template 定义了一个模板。您在这里不需要模板，模板不应该用于此目的。它当然可以工作，但它不适合您的场景。

在此处阅读有关 ng-template 和 ng-container 的更多信息:https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/

作为最后的旁注，您可以通过定义一个项目来使用ng-template，并且您可以使用ng-container和*ngTemplateOutlet 渲染模板。查看上面的指南以获取一些示例。