Angular 角度7绑定下拉列表

如何同步阵列内容和显示

我的目的：“groupeBeatles”是我的参考数组，“nom”/“prenom”显示控件必须始终符合此数组。此回调用于：

synchromebre（$event）{
const prenom:string=this.groupebeateles.filter（membre=>{
membre.nom=this.nomCourant；
})[0].prenom；
console.log（“******prenomCourant-prenom**********”，this.prenomCourant，“-”，prenom）；
this.prenomCourant=prenom；
}

例如，如果我把名字“保罗”归给“列侬”，他必须用“约翰”来纠正自己。事实并非如此

---

我的例子中出了什么问题？（请参阅）

如果我没听错，您希望根据选择将名称彼此对齐

您错误实现的是过滤功能

你的过滤函数应该是这样的

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

实际上，在filter中分配的值是错误的，filter将过滤掉这些值，因此需要返回真值或假值。

如果你想两者都适用，你可以这样做

  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>

名词
{{pren}}
笔名
{{nom}}

---

谢谢您的更正：我错误地键入了“=”而不是“==”，但仍然没有work@Caplande检查我的编辑和演示，你会得到一个想法，你也得到了不正确的值。不，这不是我的问题。在我的例子中，当我用一个错误的“prenom”修改它时，我只是想让“prenom”恢复到它的良好价值。例如：考虑到两个“nom”和“prenom”控件，从“nom”“Lennon”开始，如果我将“prenom”更改为“Paul”，则此控件必须返回到“John”（事实并非如此）。NoTA：我只有有线控制“PRONM”进行测试。不，考虑“NOM”设置为“列侬”。如果我把“prenom”改成“Paul”，我希望它能回到“John”，我只是明白我在这里所做的会导致一个无休止的循环。事实上，如果我在回调中再次更改“prenom”，它将再次触发相同的回调。那么如何看待这个问题呢？