Question

我正在处理我创建的动态表单组件，而我使用的自定义模板无法正确获取上下文。

这是我的ng-template：

  <ng-template #defaultTemplate let-field>
    <div class="form-group" [ngClass]="!field.isValid() ? 'has-error' : ''">
      <label class="control-label" [for]="field.property">{{ field.label }}</label>
      <app-dynamic-form-field [formField]="field"></app-dynamic-form-field>
    </div>
  </ng-template>

以下是我如何使用它：

  <ng-container *ngFor="let field of formModel.formFields">
    <ng-container [ngTemplateOutlet]="fieldTemplate || defaultTemplate" [ngOutletContext]="getContextForTemplate(field)">

    </ng-container>
  </ng-container>

以下是与创建上下文相关的组件的打字稿：

  getContextForTemplate(field: BaseFormField<any>) {
    return {
      $implict: field
    };
  }

我遇到的错误是：

ERROR TypeError：无法读取属性＆＃39; isValid＆＃39;未定义的

虽然表单字段对象确实具有isValid方法。如果我不使用上面的代码作为模板，直接在容器的* ngFor内，一切都按预期工作。

编辑：我也试过这个代码，它似乎不起作用：

<form>
  <ng-template #defaultTemplate let-field>
    <div>
      {{ field }}
    </div>
  </ng-template>

  <ng-container *ngFor="let field of [1,2,3]" [ngTemplateOutlet]="defaultTemplate" [ngOutletContext]="{ $implict: 'hello' }">

  </ng-container>

  <ng-content></ng-content>
</form>

Answer 1

有点愚蠢，但问题是一个错字，这个：

  getContextForTemplate(field: BaseFormField<any>) {
    return {
      $implict: field
    };
  }

应改为：

  getContextForTemplate(field: BaseFormField<any>) {
    return {
      $implicit: field
    };
  }

或换句话说：$ implict应该是$ implicit。

Angular 4模板，上下文不起作用

1 个答案: