在angular4的同一页面中显示选定的下拉值

Question

我正在使用 Angular4，我想在同一页面的左侧显示选定的下拉值。我想要像选择包装类型值时的输出，然后按添加按钮，所选值可以移动到右侧部分。实际上，我是 angular 的新人。任何人都可以帮助我

我的Html代码是

    <form #newForm="ngForm" (ngSubmit)="OnSubmit(newForm.value);newForm.reset()">
                            <div class="form-group">
                                <label>Packing Type</label>
                                <select class="form-control" >
                                    <option value="0" disabled>Please Select Packing type</option>
                                    <option *ngFor="let item of products" value={{item.ItemID}}>{{item.PackingtypeName}}</option>
                                </select>
                            </div>


for add button
                            <input type="button" value="Add Item" class="btn btn-success" (click)="addItems(newForm.value);newForm.reset()" />

                        </div>

这是我的 TS 组件文件

    addItems(value: any) {
    this.items = new IComboDetails(value.itemcode, value.itemdescription, value.PackingtypeName, value.quantity);        
    this.stockitems.push(this.items);

}

Answer 1

Here is working example

<select [(ngModel)]="myDropDown" (ngModelChange)="onChangeofmyOptions($event)">
    <option value="one">One my value</option>
    <option value="two">Two  my value</option>
    <option value="three">Three  my value</option>
</select>
<input [hidden]="myDropDown !=='two'"type="text">

.ts

onChangeofOmyptions(newGov) {
     console.log(newGov);
}

你的情况

<select class="form-control" (ngModelChange)="onChangeofmyOptions($event)" >
<option value="0" disabled>Please Select Packing type</option>
<option *ngFor="let item of products" value={{item.ItemID}}>{{item.PackingtypeName}}</option>
                                    </select>




onChangeofOptions(newGov) {
     console.log(newGov);
     this.myDropDown=newGov;
}

获取右侧的值

<input type="text" value={{myDropDown}}>

用于绑定

 this.myDropDown=newGov;

在angular4的同一页面中显示选定的下拉值

show selected Drop down value in same page in angular4

html

angular

dom

angular-forms