Question

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

HTML

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

                    </div>

成分</ P>

 onChange(selected: any) {
        console.log('selected item ' + selected);
    }

注意：tabControls是一个界面

在控制台中打印

selected item 1: 2017

然而，其他选择（月，公司）失去了选择

Answer 1

编辑2：我刚注意到您通过*ngFor遍历标签，因此实际上有3个选择元素，因此您需要3个不同的ngModel绑定。

首先，将组件中selected属性的类型更改为任何array和初始化。

selected: any[] = [];

然后，在你的* ngFor上声明一个索引i，并将ngModel绑定到selected[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>

Answer 2

你可能正在寻找ngValue，它绑定了整个对象，但是，在混合中添加ngModel，但这意味着你有另一个变量。也许有更好的方法来解决这个问题，没有额外的变量。如果是这样，请告诉我们！

所以将代码更改为：

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

在你的组件中：

selected: any;

onChange(selected: any) {
  console.log('selected item ' + selected);
}

您收到的错误是因为您需要将FormsModule导入NgModule。

这是一个有效的 plunker

Answer 3

您可以遍历列表，从中绑定下拉列表。

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

在这里，lstStudents是带有id的数组，name填充下拉列表。您将获得选定的值，例如 this.selectedId = this.selectedStdId; 现在，您要做的就是遍历lstStudents数组并从中获取name与id相对应的this.selectedStdId。例如，

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

angular 2选择文本选项

3 个答案: