Angular 角度2选定文本选项

在Angular 2中，如何从选项中获取所选文本。还因为我有一个动态的SELEC数？（我想我需要添加到一个数组中）t我怎样才能得到所有的文本。我能够得到值，但我需要的是文本

HTML

注意：tabControls是一个接口

在控制台中打印

selected item 1: 2017

但是，其他选择（月份、公司）将丢失该选择

---

您可能正在寻找绑定整个对象的

ngValue

，但是使用它，可以在混合中添加

ngModel

，但这意味着您有另一个变量。也许有更好的方法来解决这个问题，不需要额外的变量。如果是，请告诉我

因此，请将代码更改为以下内容：

<select [(ngModel)]="selected" (ngModelChange)="onChange(selected)">
     <option *ngFor='let controlList of control.DropdownValues' [ngValue]="controlList">
          {{controlList.Value}}
    </option>
</select>

您遇到的错误是因为需要将

FormsModule

导入

NgModule

---

这里有一个正在运行的

编辑2:我刚刚注意到您正在通过

*ngFor

遍历选项卡，因此实际上有3个select元素，因此您需要3个不同的ngModel绑定

因此，首先，将组件内的

选定的
属性的类型更改为任意的
数组
，并初始化它

selected: any[] = [];

然后，在*ngFor上声明一个索引i，并将ngModel绑定到所选[i]
：

<div class="row  left" *ngFor='let control of tabControls; let i = index'>
                <div class="col-md-3 text-left" style="border:1px dotted">
                    {{control.DropDownTitle}}
                </div>
                <div class="col-md-9 text-left">
                    <select [(ngModel)]="selected[i]" (change)="onChange($event.target.value)">
                        <option *ngFor='let controlList of control.DropdownValues' [ngValue]="controlList.Value">
                            {{controlList.Value}}
                        </option>
                    </select>

                </div>


{{control.DropDownTitle}}
{{controlList.Value}
您可以迭代列表，从中绑定下拉列表

<mat-select placeholder="Select" [(ngModel)]="selectedStdId">
    <mat-option *ngFor="let std of lstStudents" [value]="std.id">
        {{ std.name }} 
    </mat-option>
</mat-select>

你把它放在哪里？我这样做了，得到了一个解析error@rgoal更新了我的答案。这是可行的，但这是一个解决办法……啊，好吧，你有几个下拉列表，而不是只有一个。好吧，这是基本信息，当然这个解决方案不起作用了…：请为plunker提供静态数据，这比想象的要复杂得多，如果有一个plunker可以使用，则更容易解决此问题！：）感谢AJT，muzurBurcu 11解决了该问题。但是，你的回答可以帮助我处理另一个案例（仅一滴）。因此，将选择您的答案是否有用：）我有一个问题：control.DropdownValues数组中的每个项都有哪些属性？我注意到在option元素中显示的是controlList.Value，但是绑定到[Value]的只是controlList。您能试试这个吗：[value]=“controlList.value”您能做的另一件事是为所选对象声明一个getter和setter。像这样（使用私有支持字段）
private\u选中：任意；get selected（）{return _selected；}set selected（value:any）{this._selected=value；console.log（'selected item:'+this._selected）；}
并清除select:
中的
onChange
事件，如果我这样做[value]=“controlList.value”，它会工作，但是，所有其他下拉菜单都会丢失选择。因此，看看上图，如果我选择了2017年，但月份和公司列表失去了它们的选择OK，回到您最初对更改事件的处理方式：
在您的onChange方法中，这会打印出什么：
console.log（'selected item'+selected.Value）基本打印出
所选
打印对象。您可以执行以下操作：
JSON.stringify（selected）
以JSON格式打印对象，或者如果它只是您感兴趣的值，则打印出
selected。value
更新了我的上述代码，其他下拉列表将丢失选择
selected: any[] = [];

<div class="row  left" *ngFor='let control of tabControls; let i = index'>
                <div class="col-md-3 text-left" style="border:1px dotted">
                    {{control.DropDownTitle}}
                </div>
                <div class="col-md-9 text-left">
                    <select [(ngModel)]="selected[i]" (change)="onChange($event.target.value)">
                        <option *ngFor='let controlList of control.DropdownValues' [ngValue]="controlList.Value">
                            {{controlList.Value}}
                        </option>
                    </select>

                </div>

<mat-select placeholder="Select" [(ngModel)]="selectedStdId">
    <mat-option *ngFor="let std of lstStudents" [value]="std.id">
        {{ std.name }} 
    </mat-option>
</mat-select>

for(var i = 0; i < this.lstStudents.length; i++) {
    if(this.lstStudents[i].id == this.selectedStdId) {
        this.yourDesiredText = this.lstStudents[i].name;
    }
}