使用单向绑定angular2

时间:2017-10-12 18:48:03

标签: html typescript angular2-forms

目标:根据下拉列表选择获取值集合,并将它们放在隐藏的输入字段中以包含在我的模型中;

相对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的数据。使用webservice调用填充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的新变量。我没有得到任何价值,即使在单步执行代码时我发现它有价值。

我怎样才能获得填充的价值,以便在模型中使用它?如果我需要提供其他任何内容,请告诉我。

谢谢!

1 个答案:

答案 0 :(得分:0)

如果我正确理解你的意思,那么这样的事情就会起作用:

if [[ $(bc <<< "$result1 < $result2") -eq 1 ]]; then
    echo "r1 < r2"
else
    echo "r1 > r2"
fi

在这里,您可以将<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'} 的{​​{1}}属性直接绑定到隐藏的输入字段,而不是需要处理Address事件。