wie der Wert eines Eingabeelements basierend auf dem Wert von anderen Eingabeelement in Winkel 2

Question

Ich habe und Array eines Objekts 'sagen' Person {Name: String, Alter: Nummer}. In meinem HTML zeige ich Name als Eingabeelement mit Auswahl an. Wenn ich einen Namen aus dieser Auswahl wähle, möchte ich das entsprechende Alter der Person in dem Alterseingabeelement anzeigen. Weiß jemand, wie man das macht? Hier ist mein HTML-Code:

Wie zeige ich Alter basierend auf meiner Auswahl der Person Name? Beide Eingabeelemente befinden sich auf derselben Seite/Komponente.

Answer 1

Sie können den ausgewählten Personenalterswert aktualisieren, wenn sich die ausgewählte Person über das Ausgabeereignis ngModelChange ändert.

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

Und in Ihrer Komponente Definition:

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

    } 

ich mit datalist Bindung vor so nicht sicher, ob nicht versucht habe, wenn dies wie z out-of-the-box unterstützt wird select Element. Es gibt möglicherweise eine einfachere Möglichkeit, dies zu tun (vielleicht hilft eine andere Antwort)