使用一种方式绑定 angular2 未显示输入字段的值

Question

Objective：根据下拉选择获取一组值，并将它们放置在隐藏的输入字段中以包含在我的模型中；

亲戚html:

<select class="selectFoo" (change)="onSelect($event.target.value)" name="FooName" ngModel>
            <option selected="selected">--Select--</option>
            <option *ngFor="let foo of foos" [value]="foo.ID">{{foo.Name}}
</option>
</select>
<input type="hidden" [value]="fooAddress" name="FooAddress" ngModel/>

在上面的代码中，我调用了一个名为 OnSelect 的函数来获取有关所选 foo 的数据。 foos 是使用网络服务调用填充的。这是我的 ts 文件中的片段。

import { Component, OnInit } from '@angular/core';

import { Foo } from './model';

import { DataService } from './data.service';


@Component({
  moduleId: module.id,
  selector: 'add-on',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  foos : Foo[];

  selectedFoo: Foo;
  fooAddress: string;

  onSelect(fooID){
      this.selectedFoo = null;
      for(var i = 0; i < this.foos.length; i++)
      {
        console.log(this.foos[i].ID);
        if(this.foos[i].ID == fooID){
          this.selectedFoo = this.foos[i];
          this.fooAddress = this.selectedFoo.Address.toString();
        }
      }
    }
   }

我最初尝试了一种将我的值绑定到 selectedFoo 的方法，但我收到一条错误消息，指出我的地址值未定义。我注意到我可以将值设置为等于 selectedFoo 并且没有错误。所以我创建了一个新变量，该变量根据选定的 foo 设置为 fooAddress。即使在单步执行代码时我看到它有一个值，我也没有得到任何值。

如何获取要填充的值以便在我的模型中使用它？如果我需要提供任何其他信息，请告诉我。

谢谢！

Answer 1

如果我正确地理解了你的意思，那么这样的事情就可以了：

<select name="FooName" [(ngModel)]="selectedFoo">
  <option>--Select--</option>
  <option *ngFor="let foo of foos" [ngValue]="foo" >{{foo.Name}}</option>
</select>
<input type="hidden" [value]="selectedFoo?.Address" name="FooAddress" />

//Assuming your 'foo' items are e.g. { ID: 1, Name: 'Hello', Address: '123 Hello St'}

在这里您可以将selectedFoo的Address 属性直接绑定到您的隐藏输入字段，而不需要处理(change)事件。

使用一种方式绑定 angular2 未显示输入字段的值

Value not showing for input field using one way binding angular2

html

typescript

angular2-forms