angular - 输入和列表之间的角度双向绑定

Question

我有以下内容：

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

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

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

我是角度的新手，任何帮助将不胜感激。

谢谢你。

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;
}

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