Question

我尝试过此问题Dynamic ngTemplateOutlet value中的示例，但仍然没有成功。

我想根据用户选择的选项动态显示ng-template表单。

我已经在自己的component.ts中定义了全局变量和3种形式及其模板引用。

@ViewChild('formA', {static: false}) formAref: TemplateRef<any>;
formA = new UserForm('formA', 'Mus Mauris Form', this.formAref);

@ViewChild('formB', {static: true}) formBref: TemplateRef<any>;
formB = new UserForm('formB', 'Vitae Purus Faucibus Form ', this.formBref);

@ViewChild('formC', {static: true}) formCref: TemplateRef<any>;
formC = new UserForm('formC', 'Aliquet Nec Form', this.formCref);


selectedForm: TemplateRef<any>;
totalForms: UserForm[] = [];

其中UserForm定义为

interface UserFormInterface {
  id: string;
  display: boolean;
  submitFunc: Function;
}

class UserForm implements UserFormInterface {
  id: string;
  form_name: string;
  display: boolean;
  submitFunc: Function;
  reference: TemplateRef<any>;

  constructor(id: string, form_name: string, reference: TemplateRef<any>) {
    this.id = id;
    this.form_name = form_name;
    this.reference = reference;
  }
}

在我的HTML模板中，我有以下

<div id="inner-form-dashboard" class="row">
      <div id="form-list" class="col-4">
          <div
               *ngFor="let form of totalForms" 
              class="form-item d-flex flex-column justify-content-around align-items-center">
              <div class="form-link" (click)="showForm(form)">{{form.form_name}}</div>
          </div>
      </div>
      <div id="form-container" class="col-8 d-flex flex-column justify-content-between">
          <div *ngFor="let form of totalForms">
              <ng-container *ngIf="form.display" style="display: block;">
                {{form.id}}
                  <div
                      *ngTemplateOutlet='selectedForm'>
                  </div>
              </ng-container>
          </div>  
      </div>
</div>

<ng-template #formA>
    <form>
        <div class="form-group">
            <label for="exampleFormControlInput1">Email address</label>
            <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
        </div>
        <div class="form-group">
            <label for="exampleFormControlSelect1">Example select</label>
            <select class="form-control" id="exampleFormControlSelect1">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            </select>
        </div>
        <div class="form-group">
            <label for="exampleFormControlTextarea1">Example textarea</label>
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
        </div>
    </form>
</ng-template>

第一列col-4将根据在左侧单击哪个项目来确定在第二列col-8中显示哪种表单。

当我单击左侧的项目时，可以看到form.id显示在右侧，这意味着表单和ngFor的选择工作正常，但是模板*ngTemplateOutlet='selectedForm'>上的行不会显示。

该功能在我的组件中看起来像这样

showForm(form: UserForm): void {
    this.totalForms.forEach(f => f.display = false);
    form.display = true;
    this.selectedForm = form.reference;
    console.log(form);
    console.log('selected', this.selectedForm);
  }

https://stackblitz.com/edit/angular-34r1gw

https://angular-34r1gw.stackblitz.io

Answer 1

问题的原因是，您尝试过早使用模板引用。具有@ViewChild的{{1}}属性最早在ngOnInit生命周期挂钩中提供：

{ static: true }

使用ngOnInit() { this.formA = new UserForm('formA', 'Mus Mauris Form', this.formAref); this.formB = new UserForm('formB', 'Vitae Purus Faucibus Form ', this.formBref); this.formC = new UserForm('formC', 'Aliquet Nec Form', this.formCref); this.totalForms.push(this.formA, this.formB, this.formC); }时，最早的{ static: false }属性可用是在ngAfterViewInit生命周期挂钩中。

StackBlitz Example

如何在Angular中使用模板参考动态渲染ng-template

1 个答案: