Angular 6 - ngModel устанавливает двухстороннюю привязку данных через функцию - PullRequest
Новая
       19

Angular 6 - ngModel устанавливает двухстороннюю привязку данных через функцию

0 голосов
/ 25 декабря 2018

Учитывая массив людей: 

let people = [...]

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

У меня есть следующий фрагмент кода: 

<select [(ngModel)]="personIndex">
    <option *ngFor="let p of people" [value]="findIndexOfPerson(p.id)">
      {{p.name}}
    </option>
</select>

<input placeholder="Name" 
       [ngModel]="getPersonName()"
       [hidden]="personIndex == null">

Внутри моего компонента: 

personIndex = null;

findIndexOfPerson(i) {
    return this.people.findIndex(p => p.id == i) 
}

getPersonName() {
    if (this.personIndex == null || this.personIndex == -1) return null;
    return this.people[this.personIndex]['name'];
}

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

[ngModel] = "getPersonName ()" на [(ngModel)] = "getPersonName ()"

, программа выдает компиляторошибка.

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

Ответы [ 2 ]

0 голосов
/ 25 декабря 2018

Используйте [ngValue], чтобы связать человека в избранном.Используйте этого человека, чтобы связать с другими свойствами человека.Для этого вам не понадобятся никакие методы. 

<select [(ngModel)]="selectedPerson">
  <option selected [ngValue]="null">Select a person</option>
  <option 
    *ngFor="let person of people; let i = index" 
    [ngValue]="person">
    {{person.name}}
  </option>
</select>

<input 
  placeholder="Name" 
  [(ngModel)]="selectedPerson.name"
  *ngIf="selectedPerson">

export class MyComponent {
  people = [....];
  selectedPerson = null;
}

Также, даже если вы хотите найти индекс в *ngFor, вы можете использовать let i = index

т.<option *ngFor="let p of people; let i = index" [value]="i">

0 голосов
/ 25 декабря 2018

Я думаю, что вам не хватает функции, которая будет менять имя при изменении входного значения.Вы должны прослушать событие keyup на input и вызвать этот метод с помощью $event.target.value: 

changeNameOfCurrentlySelectedPerson(newName) {
  if(this.personIndex) {
    this.people[this.personIndex].name = newName;
  }
}

. Это проверит, выбран ли человек из выпадающего списка, и соответствующим образом изменит имя.

Вот как вы будете связывать это в своем представлении: 

<input 
  placeholder="Name" 
  [ngModel]="getPersonName()"
  (keyup)="changeNameOfCurrentlySelectedPerson($event.target.value)"
  [hidden]="personIndex == null">

Вот Рабочий образец StackBlitz для вашегоссылка

...