Question

我有一个对象的阵列＆＃39;说＆＃39; person {name：string，age：number}。在我的HTML中，我显示名称作为输入元素与选择。如果我从这个选择中选择一个名字，我想在年龄输入元素中显示人的相应年龄。谁知道怎么做？这是我的HTML代码：

<!-- Display person's name -->
<div class="input-group">
        <span class="input-group-addon">Person Name</span>
        <input type="text" [(ngModel)]="selectedPerson.name" name="personName"  list="persons" required>
        <datalist id="persons">
            <option *ngFor='let p of person_list' value={‌{p.name}} selected>
                {‌{p.name}}
            </option>
        </datalist>
 </div>
<!-- Display age -->
<div class="input-group">
        <span class="input-group-addon">Age</span>
        <input type ="text"
                placeholder="Age"  
                [(ngModel)]="selectdPerson.age"
                name="age" required>
</div>

如何根据我选择的人名来显示年龄？这两个输入元素都位于同一页面/组件上。

Answer 1

当所选人员通过ngModelChange输出事件更改时，您可以更新所选人员年龄值。

<div class="input-group">
  <span class="input-group-addon">Person Name</span>

  <input type="text" [(ngModel)]="selectedPerson.name" name="personName"  list="persons" required (ngModelChange)="onChanged($event)">

  <datalist id="persons">
    <option *ngFor="let p of person_list" [value]="p.name" selected>
        {{p.name}}
    </option>
  </datalist>

</div>
<!-- Display age -->
<div class="input-group">
  <span class="input-group-addon">Age</span>
  <input type ="text"
          placeholder="Age"  
          [(ngModel)]="selectedPerson.age"
          name="age" required>
</div>

在您的组件定义中：

    export class MyComponent {

      person_list: any[] = [
                    {name: 'aaa', age: 21},  
                    {name: 'bbb', age: 31},  
                    {name: 'ccc', age: 41}];

      selectedPerson: any =  {};

      onChanged($event){
        var match = this.person_list.find(x => x.name === $event);
        this.selectedPerson.age = match.age;
      }

    }

我之前没有尝试过绑定datalist，所以不确定这是否支持开箱即用，例如select元素。可能有一种更简单的方法（也许另一个答案会有所帮助）

如何根据角度2

1 个答案: