Rectangle 27 0

typescript How to use selectoptionNgFor on an array of objects in Angular2?


*ngFor="#o of objArray"
*ngFor="let o of objArray"
[ngModel] = "selectedObject | json"
[value]="o | json"
interface TestObject {
  name:string;
  value:number;
}

@Component({
  selector: 'app',
  template: `
      <h4>Select Object via 2-way binding</h4>

      <select [ngModel]="selectedObject | json" (ngModelChange)="updateSelectedValue($event)">
        <option *ngFor="#o of objArray" [value]="o | json" >{{o.name}}</option>
      </select>

      <h4>You selected:</h4> {{selectedObject }}
  `,
  directives: [FORM_DIRECTIVES]
})
export class App {
  objArray:TestObject[];
  selectedObject:TestObject;
  constructor(){
    this.objArray = [{name: 'foo', value: 1}, {name: 'bar', value: 1}];
    this.selectedObject = this.objArray[1];
  }
  updateSelectedValue(event:string): void{
    this.selectedObject = JSON.parse(event);
  }
}
stringify()
this.selectedObject = JSON.parse(event.target.value);
updateSelectedValue(event: Object)
updateSelectedValue(event:string)

I'm no expert with DOM or Javascript/Typescript but I think that the DOM-Tags can't handle real javascript object somehow. But putting the whole object in as a string and parsing it back to an Object/JSON worked for me:

Thank you. I haven't tested it, but it looks like it would work. It's still non-obvious and clunky, so I hope that the ng2 team comes up with a more direct approach, but it's a definite option.

Note
Rectangle 27 0

typescript How to use selectoptionNgFor on an array of objects in Angular2?


<select [(ngModel)]="objValue"> // value is an object
    <option *ngFor="#obj of objArray" [ngValue]="obj">{{obj.name}}</option>
</select>
<select [(ngModel)]="simpleValue"> // value is a string or number
    <option *ngFor="#obj of objArray" [value]="obj.value">{{obj.name}}</option>
</select>

Can't bind to 'ngModel' since it isn't a known property of 'select'. This is what i get

I don't know what things were like in the alpha, but I'm using beta 12 right now and this works fine. If you have an array of objects, create a select like this:

If you want to match on the actual object, I'd do it like this:

The binding works find when user select an item in the list. However, the selected item is not show correctly when the page is loaded. Can you provide plunker for working example?

Note
Rectangle 27 0

typescript How to use selectoptionNgFor on an array of objects in Angular2?


<select [(ngModel)]="objValue"> // value is an object
    <option *ngFor="#obj of objArray" [ngValue]="obj">{{obj.name}}</option>
</select>
<select [(ngModel)]="simpleValue"> // value is a string or number
    <option *ngFor="#obj of objArray" [value]="obj.value">{{obj.name}}</option>
</select>

Can't bind to 'ngModel' since it isn't a known property of 'select'. This is what i get

I don't know what things were like in the alpha, but I'm using beta 12 right now and this works fine. If you have an array of objects, create a select like this:

If you want to match on the actual object, I'd do it like this:

The binding works find when user select an item in the list. However, the selected item is not show correctly when the page is loaded. Can you provide plunker for working example?

Note
Rectangle 27 0

typescript How to use selectoptionNgFor on an array of objects in Angular2?


*ngFor="#o of objArray"
*ngFor="let o of objArray"
[ngModel] = "selectedObject | json"
[value]="o | json"
interface TestObject {
  name:string;
  value:number;
}

@Component({
  selector: 'app',
  template: `
      <h4>Select Object via 2-way binding</h4>

      <select [ngModel]="selectedObject | json" (ngModelChange)="updateSelectedValue($event)">
        <option *ngFor="#o of objArray" [value]="o | json" >{{o.name}}</option>
      </select>

      <h4>You selected:</h4> {{selectedObject }}
  `,
  directives: [FORM_DIRECTIVES]
})
export class App {
  objArray:TestObject[];
  selectedObject:TestObject;
  constructor(){
    this.objArray = [{name: 'foo', value: 1}, {name: 'bar', value: 1}];
    this.selectedObject = this.objArray[1];
  }
  updateSelectedValue(event:string): void{
    this.selectedObject = JSON.parse(event);
  }
}
stringify()
this.selectedObject = JSON.parse(event.target.value);
updateSelectedValue(event: Object)
updateSelectedValue(event:string)

I'm no expert with DOM or Javascript/Typescript but I think that the DOM-Tags can't handle real javascript object somehow. But putting the whole object in as a string and parsing it back to an Object/JSON worked for me:

Thank you. I haven't tested it, but it looks like it would work. It's still non-obvious and clunky, so I hope that the ng2 team comes up with a more direct approach, but it's a definite option.

Note