Question

过去我能够传递出用于选择选项的'对象'。我想从常规选择中捕获这些信息，但我不记得是怎么做的。

所以当你在select选项中执行* ngFor时，你可以像这样指定N个N

<option *ngFor="let thing of things" value= {{thing.name}}>
    {{thing.family}} - {{thing.name}}
</option>

我希望通过调用更改函数，我可以获得所选择的“整体”。

<select class="form-control input-sm " 
        (change)="changeThing($event)" 
        name="thing" 
        formControlName="thing" >

    <option *ngFor="let thing of things" value= {{thing.name}}>
        {{thing.family}} - {{thing.name}}
    </option>

</select>

因为我想根据事物的“家族”更改一些表单选项，而不是传递的值。

我的功能看起来像这样。

changeThing (thing) {
    console.log('thing:', thing);
    selectedFamily = ??;
}

$ event可能是错误的看待 - 我可以在那里选择值，但我找不到所选的整个“东西”。

感谢您的帮助。

Answer 1

您可以在index

的帮助下完成此操作

模板面：

<select class="form-control input-sm " 
        [(ngModel)]="selectedValue"
        (change)="changeThing($event.target.value)" 
        name="thing" >
    <option *ngFor="let thing of things; let i = index;" [value]="i">
        {{thing.family}} - {{thing.name}}
    </option>
</select>

组件方：

changeThing(index){
    alert(this.things[index].family +' '+this.things[index].name );
    console.log(this.things[index]);
}

<强> WORKING DEMO

Answer 2

我希望它会有所帮助

<option *ngFor="let thing of things" value= {{thing}}>
        {{thing.family}} - {{thing.name}}
    </option>

Answer 3

您可以将ngModel与ngModelChange一起使用

<select [(ngModel)] ="selectedType" (ngModelChange)="changeThing(selectedType)">
     <option *ngFor="let thing of things" [ngValue]="thing ">
            {{type.name}}
     </option>
</select>

angular2在选择框中选择整个对象

3 个答案: