Question

我正在尝试执行以下操作： 1.从下拉框中选择选项 2.根据该信息从数据库获取值 3.在文本框中显示

我做了前两步，但没有获得如何将函数返回的值绑定到该特定文本框的方法。

例如有一个带有分销商名称的选择框，在选择分销商名称时，我想在文本框中显示另一个表格中的相关产品价格。分配器是一个表，费率是另一个表

Answer 1

这非常简单，请使用NgModel：

对于Angular 2 + ：

<input type="text" id="txtBox" [(ngModel)]="textbox" name="textbox" />

，然后输入打字稿：

export class SimpleNgModelComp {
  textbox: string = '';

  setValue() { this.textbox= 'somevalue'; }
}

对于有角度的js ：

 <input type="text" id="txtBox" ng-model="textbox" name="textbox" />

，然后在控制器中：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.textbox = "somevalue";
});

ng-model是Two-Way-Binding指令。

Answer 2

这是工作示例，我使用示例数据创建了这个示例，可以替换实际值。

HTML文件

<select [(ngModel)]="selectionModel" (change)="onChange()">
  <option [ngValue]="undefined" disabled selected>Choose Name</option>
  <option *ngFor="let item of data" [ngValue]="item"> {{item.name}} </option>  
</select>

<input type="text" [(ngModel)]="name">

打字稿文件

    public showRate;
    public selectionModel;
    public data = [
        {
          id: 1,
          name: "Muthu",
        },
        {
          id: 2,
          name: "Jeeva",
        },
        {
          id: 3,
          name: "Gokul",
        }
      ];

  public rateData:any[]=[
        {
          rate: 10,
          name: "Muthu",
        },
        {
          rate: 20,
          name: "Jeeva",
        },
        {
          rate: 30,
          name: "Gokul",
        }
  ]
      onChange() {    
        this.name = this.selectionModel.name;

       //For one Result use find method
        this.showRate=this.rateData.find((o)=>o.name == this.selectionModel.name));

       //For more Result use filter method
        this.showRate=this.rateData.filter((o)=>o.name == this.selectionModel.name));

     console.log("Your Filtered Data Here",this.showRate);
      }

输出屏幕截图

角度-如何在文本框中显示下拉选择的值

2 个答案: