Угловые 7 выпадающих списков

Question

Как синхронизировать содержимое и отображение массива?

Моя цель: "groupeBeatles" - это мой ссылочный массив, и отображаемые элементы управления "nom" / "prenom" всегда должны соответствовать этому массиву.Этот обратный вызов предназначен для этого:

synchroMembre($event) {
    const prenom: string = this.groupeBeatles.filter(membre => {
        membre.nom = this.nomCourant;
    })[0].prenom;
    console.log('******* prenomCourant - prenom *************', this.prenomCourant, ' - ', prenom);
    this.prenomCourant = prenom;
}

Например, если я приписываю «Леннону» имя «Пол», он должен исправить себя в «Джон».Дело не в этом!

Что не так в моем примере?(См. StackBlitz )

Answer 1

Если я вас правильно понимаю, вы хотите выровнять имена друг с другом на основе выбора,

То, что вы ошибочно реализовали, является функцией фильтра,

Ваша функция фильтра должна выглядеть следующим образомТаким образом,

 const newName: string = this.groupeBeatles.filter(membre => membre.prenom === $value)[0].nom;       
    this.nomCourant=newName;

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

Если вы хотите применить к обоим, вы можете сделать что-то вроде этого

  synchroMembre($value, typeChange) {
    if (typeChange === 'pren') {
      const newName: string = this.groupeBeatles.filter(membre => membre.prenom === $value)[0].nom;
      this.nomCourant = newName;
    } else {
      const newName: string = this.groupeBeatles.filter(membre => membre.nom === $value)[0].prenom;
      this.prenomCourant = newName;
    }

  }

и передать значения

<form #monForm="ngForm">
    <div class="form-group">
        <label for="prenom">Prénom</label>
        <select class="form-control" id="prenom" [ngModel]="prenomCourant" (ngModelChange)="synchroMembre($event,'pren')" required name="prenom">
          <option *ngFor="let pren of prenoms" [value]="pren">{{ pren }}</option>
        </select>
  </div>

    <div class="form-group">
        <label for="nom">Nom</label>
        <select class="form-control" id="nom" [(ngModel)]="nomCourant" (ngModelChange)="synchroMembre($event,'nom')" required name="nom">
          <option *ngFor="let nom of noms" [value]="nom">{{nom}}</option>
        </select>
  </div>
</form>

Демо