角度2の他の入力要素の値に基づいて入力要素の値を表示する方法

Question

オブジェクト「say」person {name：string、age：number}の配列があります。私のhtmlでは、私はselectionを持つinput要素としてnameを表示しています。この選択肢から名前を選択すると、年齢入力要素に対応する年齢を表示したいと考えています。誰でもこれを行う方法を知っていますか？ここに私の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要素。これを行う簡単な方法があるかもしれません（おそらく別の答えが助けになります）