根据Angular 2中的下拉选择选择输入类型

时间:2017-07-18 10:30:41

标签: html5 angular

<select class="select-sm form-control staffPatient" [(ngModel)]="personType">
                             <option value="staff" selected="true">Staff</option>
                             <option value="patient">Patient</option>
                            </select>

根据选择我需要显示字段。

如果是员工,则会显示

 <p-autoComplete [hidden]="personType != staff" [(ngModel)]="val" [suggestions]="staffInfoList" field="perscode" field="personName" [minLength]=4 
                                    (onSelect)="setPersonInvolved($event)"  
                                    (completeMethod)="getPersonalMast($event)" [ngModelOptions]="{standalone: true}"></p-autoComplete>

如果是患者,则会显示

 <input [hidden]="personType != patient" type="text" required="" class="form-control search" (keyup.enter)="getPatientInfo($event)" >

已编写代码[隐藏]但无效。 2.尝试选择=&#34;真&#34;在下拉列表中将员工设为默认值,但是下拉默认值为空

1 个答案:

答案 0 :(得分:-1)

<select class="select-sm form-control staffPatient" #personType (change)='onChange(personType.value)'>
                         <option value="staff" selected="true">Staff</option>
                         <option value="patient">Patient</option>
                        </select>

然后在.ts文件中

staff = false;
patient = false;
onChange(value) {
   if (value === 'staff') {
        this.staff = true;
    }if (value === 'patient') {
        this.patient = true;
    }
}

最后

<p-autoComplete *ngIf='staff' [(ngModel)]="val" 
[suggestions]="staffInfoList" field="perscode" field="personName" 
    [minLength]=4 
                                (onSelect)="setPersonInvolved($event)"  
                                (completeMethod)="getPersonalMast($event)" 
[ngModelOptions]="{standalone: true}"></p-autoComplete>

<input *ngIf='patient' type="text" required="" class="form-
control search" (keyup.enter)="getPatientInfo($event)" >