在Angular2中选择

Question

我必须做登录，我需要选择选项。我可以帮助我犯错的人吗？ 有我的代码

@Component({
    moduleId: module.id,
    selector: 'tenants',
    template:`<select name="repeatSelect"  id="repeatSelect" [(ngModel)]="model.tenant">
      <option *ngFor="let tenant of tenants" value="{{tenant.abbr}}">{{tenant.name}}</option>
    </select>`
})



export class TenantComponent implements OnInit {
    model: any = {};
    loading = false;
    error = '';
    public tenants: Tenant[];

    constructor(

        private tenantService: TenantService) { }

    setTenant(){
        //if you're on older versions of ES, use for-in instead
        var tenant = this.tenants.find(t => t.name);

        if(tenant) { this.model.tenant = tenant; }
    }

    ngOnInit() {
        this.loading = true;

        this.tenantService.tenants()
            .subscribe((result : Tenant[]) => {
                this.tenants = result;
            });
    }
}

然后我在Login模板中插入。

如果我选择其中一个选项。在Side的HTML中

我选择了选项后发送了登录请求。它不起作用

由于

Answer 1

setTenant(){
        //if you're on older versions of ES, use for-in instead
        var tenant = this.tenants.find(t => t.name);

        if(tenant) { this.model.tenant = tenant; }
    } 

这部分代码看起来非常奇怪。

this.tenants.find(t => t.name)错过了一些布尔表达式。您需要将t.name与您选择的名称（如t.name == selectedName）进行比较。这样租户将始终为null，因为find需要一些布尔表达式来查找内容！

Answer 2

[(ngModel)]="model.tenant"指的是Tenant个对象，但value="{{tenant.abbr}}"指的是字符串。

我认为应该是

template:`
<select name="repeatSelect"  id="repeatSelect" [(ngModel)]="model.tenant">
  <option *ngFor="let tenant of tenants" [ngValue]="tenant">{{tenant.name}}</option>
</select>`

[ngValue]允许将对象值与<option>

一起使用