angular 5 ngModel条件绑定

问题描述 投票:0回答:1

我在角5工作,我有一些问题。我有两个模型Person,和Employee继承自Person并拥有自己的属性。在我的组件的html文件中,我创建了一个包含一些输入字段的表单:

<input type="texte" name="name" [(ngModel)]="person.name" />
<input type="texte" name="numberPhone" [(ngModel)]="person.numberPhone" />
<button (click)="isEmployee=true" type="button">is employee</button>
<div *ngIf="isEmployee">
<input type="texte" name="salary" [(ngModel)]="employee.salary" />
</div>

问题是,如果isEmployee为false,我想使用相同的表单来绑定person,如果isEmployee为true,我想使用employee。以下代码不起作用

[(ngMode)]="isEmployee ? person.name : employee.name"
[(ngMode)]="isEmployee ? person.numberPhone : employee.numberPhone "

有没有办法做到这一点,而不重复HTML代码?

angular typescript angular5
1个回答
0
投票

为什么不使用与正常情况下绑定的ngModel创建一个模板:

[(ngMode)]="user.name"

并为每种类型的用户在不同的组件之间共享此模板文件(因此只有人员组件具有模板文件) - 因此在您的情况下,1个组件用于人员,1个用于员工。在各自的组件中,您可以将用户设置为员工组件中的员工和人员组件中的人员。

© www.soinside.com 2019 - 2024. All rights reserved.