Question

我的html中有一个下拉列表和应用按钮，在我的ts文件中，我有apply（）函数和声明的数组。我可以在前端显示带有值的下拉列表，但是当我单击“应用”按钮时，我没有从下拉列表中获取所选值。我现在使用lert框来显示所选值。

 <div class="form-group">
                <label for="inputdefault" class="control-label col-sm-2">Portal:</label>
                 <div class="col-sm-10">

                    <select class="form-control" id="inputdefault" name = "portal">
                        <option *ngFor="let c of portalValues">{{c.group}}</option>
                    </select>
                </div>
            </div>
          <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" class="btn btn-primary" (click)="apply(portal)">Apply</button>                    
                    <button type="reset" class="btn btn-default" (click)="cancel()">Clear</button>
                </div>
            </div>

在ts，

 portalValues: Array<Object> = [{id:1, group:'Enterprise'},{id:2, group:'Business'}];

apply(portal:any) {
     alert(portal);
  }

并且警报值显示为未定义。如何从下拉列表中获取所选值。

Answer 1

您需要在ngModel输入中加入select。这样的事情应该做到这一点。这样变量portal绑定到下拉列表选择的值。 name属性不会这样做。

<select class="form-control" id="inputdefault" [(ngModel)]="portal" name = "portal">
     <option *ngFor="let c of portalValues">{{c.group}} </option>
</select>

您可能还需要在select标记中加入此内容： #name="ngModel"

Answer 2

这是因为您传递的portal参数未定义。有多种方法可以做到这一点。一个只是宣布一个Template Reference Variable。

例如：

<select class="form-control" id="inputdefault" name = "portal" #portalSelect>
  <option [value]="c.group" *ngFor="let c of portalValues">{{c.group}}</option>
</select>

这里发生了两件事：

我将#portalSelect添加到select元素中，以便我可以引用它。
我将[value]属性绑定添加到选项元素并将其绑定到group属性（您可以将其绑定到您认为合适的内容，但如果您想绑定到对象本身，则需要使用[ngValue]代替）

然后，当您将所选门户网站传递给组件功能时，您可以使用apply(portalSelect.value)。

如果您需要表单支持，或者想要将选择绑定到组件，则需要使用[(ngModel)]。在这种情况下，您可能希望在组件上为所选值提供属性，并将其绑定到它：

<select [(ngModel)]="selectedPortal">
...

并在您的组件中

selectedPortal: any;

apply() {
  // do something with this.selectedPortal
}

在typescript angularjs中下拉选定的值

2 个答案: