Angular 输入和列表之间的双向绑定

Question

我有以下内容：

<input [(ngModel)]="title"></input>
<div class="list">
    <div *ngFor="let list of lists>
       <div (click)="updateNGModel();"> {{list.Name}}</div>
    </div>
</div>

我想做的是假设有 5 个列表。单击其中一个时，我想在输入字段中显示单击的值。

如何在列表值和输入字段值之间创建双向绑定？

我是 angular 的新手，如有任何帮助，我们将不胜感激。

谢谢。

Answer 1

您应该将 list 值传递给您的 updateNGModel() 方法，然后在该方法中将名称（或任何值）存储到 title 属性

// component.html
<div *ngFor="let list of lists>
    <div (click)="updateNGModel(list);"> {{list.Name}}</div>
</div>

// component.ts
updateNGModel(list){
    // store the Name value to the title property
    this.title = list.Name;
}

现在由于 title 是绑定到您的输入的 2 路数据，您的输入字段将被更新。

Angular 输入和列表之间的双向绑定

Angular two way binding between input and lists

angular

two-way-binding