Question

我正在尝试创建一个将值绑定到Object的select控件，在更改时我可以访问所选对象。

我知道表单中有很多更改，因此不确定这是用户错误还是错误或不可能。

这是我到目前为止所处的位置：Link to Plunker

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

@Component({
    selector: 'my-app',
    template: `
       <h1>My First Angular 2 App</h1>
       <select (change)="onChange($event)" [(ngModel)]="selected">
          <option value=''></option>
          <option *ngFor="let d of data" [ngValue]="d">
             {{d.name}}
          </option>
       </select>
   `
})
export class AppComponent { 
  diagnostic;
  selected;
  data = [
     { id: 1 , name: 'query 1', filters: [
        { 'filter1': 'material = 1'},
        {'filter2': 'plant = 2'}
       ]
     },
     { id: 2 , name: 'query 2', filters: [
        { 'filter1': 'material = 1'},
        {'filter2': 'plant = 2'}
        ]
     }
  ];

   onChange(event) {
      console.log(event.target.value);
      console.log(this.selected);
  }
}

我希望发生的是当调用onChange事件时，我将所选项的Object值传递给该方法，或者通过绑定在ngModel中的属性访问所选值。

//expected
onChange(event) {
  console.log(event.target.value) // selected object bound to ngValue
  console.log(this.selected) // ngModel updated to object bound to selected option 
}

但不幸的是，event.target.value是对象的字符串版本，而this.selected类似，但总是在更新后面。

有没有其他办法或正确方法来处理这个问题？ ngModel中的延迟是一个错误吗？

任何帮助将不胜感激！

Answer 1

您应该如下定义选择输入/输出：

'use strict';

angular.module('OpenTMIControllers')
  .controller('ResourcesController', ['$scope', 'Resource', '$stateParams', '$log', '$http',
    function($scope, Resource, $stateParams, $log, $http) {

      $log.info('init ResourcesController')

      var updateTable = function(q) {
        var q = q || {};
        Resource.query({
          q: JSON.stringify(q)
        }, function(resources) {
          console.log(resources);
          $scope.dataResources = resources;
        });
      }
      $scope.columns = [{
          field: 'protoid',
          width: 150,
          enableCellEdit: false,
          displayName: 'ProtoID',
          visible: true
        }, {
          field: 'name',
          width: 150,
          enableCellEdit: false,
          displayName: 'Name',
          visible: true
        }, {
          field: 'model',
          width: 150,
          enableCellEdit: false,
          displayName: 'Model',
          visible: true
        }, {
          field: 'hw',
          width: 100,
          enableCellEdit: false,
          displayName: 'HW',
          visible: true
        }, {
          field: 'rfversion',
          width: 100,
          enableCellEdit: false,
          displayName: 'RF',
          visible: false
        }, {
          field: 'wncversion',
          width: 100,
          enableCellEdit: false,
          displayName: 'WNC',
          visible: false
        }, {
          field: 'serial',
          width: 200,
          enableCellEdit: false,
          displayName: 'Serial',
          visible: true
        }, {
          field: 'imei1',
          width: 140,
          enableCellEdit: false,
          displayName: 'IMEI1',
          visible: false
        }, {
          field: 'imei2',
          width: 140,
          enableCellEdit: false,
          displayName: 'IMEI2',
          visible: true
        }, {
          field: 'received',
          width: 140,
          enableCellEdit: false,
          displayName: 'Received',
          visible: true
        }, {
          field: 'returned',
          width: 140,
          enableCellEdit: false,
          displayName: 'Returned',
          visible: true
        }, {
          field: 'notes',
          width: 200,
          enableCellEdit: true,
          displayName: 'Notes',
          visible: true
        }, {
          field: 'sbands',
          width: 150,
          enableCellEdit: false,
          displayName: 'Supported bands',
          visible: false
        }, {
          field: 'refdev',
          width: 200,
          enableCellEdit: false,
          displayName: 'Reference',
          visible: false
        },

      ]

      $scope.gridOptions = {
        columnDefs: $scope.columns,
        enableColumnResizing: true,
        enableFiltering: true,
        //enableRowSelection: true,
        enableFullRowSelection: true,
        multiSelect: false,
        showFooter: true,
        exporterMenuCsv: true,
        enableGridMenu: true,
        data: 'dataResources',
        onRegisterApi: function(gridApi) {
          //set gridApi on scope
          $scope.gridApi = gridApi;
        }
      }

      $scope.item = {
        protoid: '',
        name: '',
        model: '',
        hw: '',
        rfversion: '',
        wncversion: '',
        serial: '',
        imei1: '',
        imei2: '',
        received: '',
        returned: '',
        notes: '',
      };
      $scope.addItem = function() {

        $scope.dataResources.push({

        });


        $http({
            method: 'POST',
            url: '/api/v0/resources/:Resource.:format?',
            data: $scope.item,
            header: {
              'Content-type': 'application/x-www-form-urlencoded'
            }
          })
          .success(function(data) {

          });

      }

      updateTable();
    }
  ]);

然后将模型正确应用于属性。 http://plnkr.co/edit/JGgflTY9LvrDDhqqlSGP?p=preview

请注意，ngModel和ngModelChange的定义应按示例顺序排序：）

Angular 2 RC4 - 选择ngModel延迟更新

1 个答案: