相关疑难解决方法(0)

我是Angular的新手,并试图通过新的做事方式加快速度.

我想将一个select元素绑定到一个对象列表 - 这很容易:

@Component({
   selector: 'myApp',
   template: `<h1>My Application</h1>
              <select [(ngModel)]="selectedValue">
                 <option *ngFor="#c of countries" value="c.id">{{c.name}}</option>
              </select>`
})
export class AppComponent{
    countries = [
       {id: 1, name: "United States"},
       {id: 2, name: "Australia"}
       {id: 3, name: "Canada"},
       {id: 4, name: "Brazil"},
       {id: 5, name: "England"}
     ];
    selectedValue = null;
}

在这种情况下,看起来selectedValue将是一个数字 - 所选项目的ID.

但是,我实际上想要绑定到country对象本身,以便selectedValue是对象而不仅仅是id.我尝试改变选项的值,如下所示:

<option *ngFor="#c of countries" value="c">{{c.name}}</option>

但这似乎不起作用.它似乎将一个对象放在我的selectedValue中 - 但不是我期待的对象.您可以在我的Plunker示例中看到这一点.

我也尝试绑定到change事件,以便我可以根据所选的id自己设置对象; 但是,看起来更改事件在更新绑定的ngModel之前触发 - 这意味着我无法访问此时新选择的值.

是否有一种干净的方法将选择元素绑定到具有Angular 2的对象？

我在Angular2中创建一个由Object数组而不是字符串支持的选择时遇到了麻烦.我知道如何使用ngOptions在AngularJS中执行此操作,但它似乎不适用于Angular2(我使用的是alpha 42).

在下面的示例中,我有四个选择,但只有两个选择.

1. 'Select String'是一个简单的基于字符串的选择,它工作正常.
2. '通过双向绑定选择对象'是我尝试使用双向绑定.不幸的是,它以两种方式失败 - 当页面加载时,select显示错误的值(foo而不是bar),当我在列表中选择一个选项时,值'[object Object]'被发送到后备存储而不是正确的价值.
3. '通过事件选择对象'是我尝试从$ event获取所选值.它也以两种方式失败 - 初始加载与#2一样不正确,当我在列表中选择一个选项时,从事件中检索到'[object Object]'的值,所以我不能得到正确的价值.选择被清除.
4. '通过字符串选择对象'是使用有效对象的唯一方法.不幸的是,它确实通过使用#1中的字符串数组并将值从字符串转换为对象和返回来实现.

如果这是预期的方式,我可以做#4,但它看起来很笨重.还有另一种方法吗？我是不是太早了？我做了些傻事吗？

import {Component, FORM_DIRECTIVES, NgFor} from 'angular2/angular2';

interface TestObject {
  name:string;
  value:number;
}

@Component({
  selector: 'app',
  template: `
    <h4>Select String</h4>
    <select [(ng-model)]="strValue">
        <option *ng-for="#o of strArray" [value]="o">{{o}}</option>
    </select>

    <h4>Select Object via 2-way binding</h4>
    <select [(ng-model)]="objValue1">
        <option *ng-for="#o of objArray" [value]="o">{{o.name}}</option>
    </select>

    <h4>Select Object via event</h4>
    <select [ng-model]="objValue2" (change)="updateObjValue2($event)">
        <option *ng-for="#o of objArray" [value]="o">{{o.name}}</option>
    </select>

    <h4>Select Object via string</h4>
    <select [ng-model]="objValue3.name" (change)="updateObjValue3($event)"> …

我想<select>在表单中使用a 让用户能够更新不同的值<option>.我使用了指南中的技术:https://angular.io/docs/ts/latest/guide/forms.html.这是我正在谈论的样本:

<div class="form-group">
    <label for="type">Type :</label>
    <select class="form-control" [(ngModel)]="order.type" ngControl="type">
        <option *ngFor="#type of types" [value]="type">{{type}}</option>
    </select>
</div>

在我的order-details.component中,我有一个updateOrder(),它从myApp.services调用updateOrder().

我的问题是当我尝试将数据从表单发送到后端时:所有具有a的部分<input>都可以,但不是那些<select>(它返回原始值,而不是选择的那个).

有没有人遇到过这个或类似的问题？谢谢你的帮助!

拜托,你能帮帮我吗？它应该很容易,但我找不到解决方案.有一个有两个选择的表单.#select1更改时,#select2需要根据#select1的值显示数据.例如,获取每个州的城市.的种类 :

//html

<select (change)="select2.getCities($event)" ng-control="userState">
    <option *ng-for="#state of states" [value]="state">{{state}}</option>
</select>

<select #select2 ng-control="userCity">
    <option *ng-for="#city of cities" [value]="city">{{city}}</option>
</select>

//the Component
@Component({ selector: 'user-management', appInjector: [FormBuilder] });
@View({ templateUrl: 'user-management.html', directives: [NgFor] });
export class userManagement {
    constructor(fb: FormBuilder){
        this.userForm = fb.group({
            userState: [],
            userCity: []
        });
        this.states = ['New York', 'Pennsylvania'];
        this.cities = {'New York': ['Albany', 'Buffalo'], 'Pennsylvania':['Pittsburgh', 'Philadelphia']};
    }
    getCities($event){
        return this.cities[$event.target.value];
    }
}

当然,这不起作用.请问,你知道应该怎么做吗？它在alpha28中.