Question

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

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

示例：

用户通过一个参数选择一个动作，显示一个输入框
用户使用两个参数选择一个动作，显示两个输入框。

我几乎可以正常工作，但是*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"
      }
    ]
  }
]

打字稿：

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一起使用来渲染模板。查看上面的指南中的一些示例。

无法在运行时动态设置集合

1 个答案: