html - 如何在 Angular 中使用模板引用动态呈现 ng-template
问题描述
我尝试了这个问题中的示例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);
}
解决方案
问题的原因是您过早地尝试使用模板引用。最早可用的@ViewChild
属性{ static: true }
是在ngOnInit生命周期钩子中:
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生命周期钩子中。@ViewChild
推荐阅读
- listview - Flutter:获取 ListView 大小以创建动态项目大小
- nestjs - NestJS:如何在@Query 对象中转换数组
- python - 在python中从PDF中提取图像
- r - R Shiny:当应用程序中的字段留空时使用函数默认值
- sql - 为什么我不能使用我的服务器名称 (SQL Server)?
- r - 将另一列合并到 rhandsontable
- c - 通过引脚连接时,USB 端口无法识别微控制器
- vba - MS Access VBA 动态显示来自 URL 的图片
- android - 如何添加secp256k1?
- python - 具有周期性边界条件的numpy数组的边界框(包装)