Вариант выбора Angular 2 из списка выбора на основе переданного параметра

Привет, надеюсь, кто-то может посоветовать, что мне не хватает.

В моем демо plunker у меня есть кнопка редактирования, которая при нажатии дает статический идентификатор 2 прямо сейчас. (это имитирует параметр id, поступающий в этот компонент в моем реальном проекте)

То, что я пытаюсь сделать, это взять переданный идентификатор, найти пользователя и выбрать его в раскрывающемся списке, чтобы он затем заполнил мои другие поля, как это происходит в настоящее время, если вы просто выбираете пользователя из списка выбора.

В моем коде я вижу, что у меня есть идентификатор, и я могу найти полное имя, которое соответствует. Я также могу заполнить поле идентификатора, но не установить выбранное значение списка выбора на полное имя, любая помощь приветствуется.

Html в настоящее время показывает раскрывающийся список и поле идентификатора с двусторонней привязкой данных

  <select [(ngModel)]="tradesman">
<option>Select</option>
<option [ngValue]="v" *ngFor='let v of _tradesmen'>{{ v.fullname}}</option>

Демонстрация Plunker, показывающая, чем я занимаюсь

Спасибо, Энди.


angular 2-way-object-databinding
person stephenad    schedule 24.10.2017    source источник
comment
Где кнопка редактирования в плункере, и кстати, плункер выдает ошибку при инициализации :)   -  person AJT82    schedule 24.10.2017

Ответы (2)


arrow_upward
1
arrow_downward

Из вопроса, что я понял, у вас есть идентификатор, и вы должны выбрать значение в поле выбора по отношению к этому идентификатору. Я надеюсь, что это на page load, поэтому я использую ngOnInit().

ngOnInit() {  
    this.myId =2;    /* ur id */

    let index = this._tradesmen.findIndex(x => x.id == this.myId);

    if(index>=0){    /* if there is value in the array that matches the id value*/
      this.tradesman = this._tradesmen[index];
    } 
  }

Вам не нужно ничего менять в вашем html файле.

  <select [(ngModel)]="tradesman">
    <option>Select</option>
    <option [ngValue]="v" *ngFor='let v of _tradesmen'>{{ v.firstname }} {{ v.lastname }}</option>
  </select>
person Veena K. Suresh    schedule 26.10.2017
comment
@stephenad, надеюсь, это то, что тебе нужно. - person Veena K. Suresh; 26.10.2017
comment
Привет, Вина, еще раз большое спасибо, это работает отлично, я думал, что редактирование html было неправильным, поскольку оно продолжало нарушать мою двустороннюю привязку. - person stephenad; 27.10.2017

arrow_upward
0
arrow_downward

Должно быть [value]="v", а не [ngValue]="v". И из вашего кода plunker ваш класс не реализует OnInit

person tobie    schedule 24.10.2017
comment
Привет, Тоби и Аджмал. Если я переключаюсь с ngValue на значение, то, когда я выбираю пользователя из раскрывающегося списка, другое поле не заполняется автоматически с помощью двухсторонней привязки. - person stephenad; 24.10.2017
comment
@stephenad, вы также можете создать функцию (click) или (change), которая обновляет ваш ngModel вручную. - person tobie; 24.10.2017