angular2选择值对象[重复]

Posted 2023-03-05

【中文标题】angular2选择值对象[重复]

【英文标题】：angular2 select value object [duplicate]

【发布时间】：2016-06-30 17:05:04

【问题描述】：

真的越来越烦了！我有一组对象，我找到了这个解决方案：How to use select/option/NgFor on an array of objects in Angular2

但毕竟我正在做同样的事情，但如果我记录我的 $event 它是未定义的..可能是因为它被字符串化但之后没有被解析回来。

这是我的代码示例：

<div class="container">
<div class="row" *ngFor="#condition of conditions;#conditionindex = index">
    <div class="col-xs-3">
        <select class="form-control" [ngModel]="stringify(condition)" (ngModelChange)="onChange(conditionindex, $event)">
            <option *ngFor="#c of catalog;#catalogindex = index" [value]="stringify(c)">
                c.name
            </option>
        </select>
    </div>
    <condition-detail [condition]="condition"></condition-detail>
</div>

<a class="btn btn-primary" (click)="newCondition()"><i class="glyphicon glyphicon-plus"></i></a>

这是组件代码：

export class ConditionBuilderComponent implements OnInit 
conditions: Condition[] = [];
catalog: Condition[] = [];

constructor(public _conditionService: ConditionService)  

getConditions() 
    this._conditionService.getConditions().then(conditions => this.catalog = conditions);


ngOnInit() 
    this.getConditions();


stringify(o:any): string 
    return JSON.stringify(o);


onChange(conditionsIndex, selectedCondition:string): void 
    console.log(typeof selectedCondition);
    //JSON.parse(selectedCondition);
    console.log(selectedCondition);
    //this.conditions[conditionsIndex] = this.catalog[condition];
    console.log(typeof selectedCondition);

请帮帮我。 selectedCondition 的控制台日志未定义。

【参考方案1】：

在最新的 Angular2 版本（beta 14）中，添加了对选择对象的支持。

【参考方案2】：

准备好了:)

解决办法：

<select class="form-control" [ngModel]="condition.name" (ngModelChange)="onChange(conditionindex, $event)">
   <option *ngFor="#c of catalog;#catalogindex = index" [value]="c.name">
                c.name
   </option>
</select>

还有组件文件：

  onChange(conditionsIndex, selectedCondition:string): void 
    this.conditions[conditionsIndex] = this.catalog.find(condition => condition.name == selectedCondition);