json - Cannot receive variable in HTML. Logged correctly in console -

i created variable (finalhostname) value received json file. logged variable , console outputs right value. when bind variable in html, value doesn't display.

ts:

  export class testcomponent implements oninit {    profiles = [     'profile 1',     'profile 2'   ];    constructor(public _networkservice: networkservice) {}   public finalhostname: '';    networks: any; /* network data received network.service.ts*/   input;    onchange(event) {     (let = 0; < this.networks.length; i++) {         if (this.networks[i].network === event.target.value) {           this.finalhostname = this.networks[i].hostname;           console.log(this.finalhostname); /* loggs correctly*/         }     }   }    models = [{   profile: this.profiles[0],   }];    updaterange(event) {     if (this.input <= 0) {       this.input = null;     } else if (this.models.length > this.input) {       this.models = this.models.slice(0, this.input);     } else {       (let = this.models.length; < this.input; i++) {         this.models.push({           profile: this.profiles[0],         });       }     }   }   ngoninit() {     this._networkservice.getnetworks()       .subscribe(resnetworkdata => this.networks = resnetworkdata);   } } 

html:

        <accordion-group *ngfor="let model of models; let currentelementindex = index"              heading="#{{currentelementindex + 1}}: {{model.profile}} - {{model.network}} - {{model.finalhostname}}">       <div class="form-group">                       <div class="col-lg-2 col-md-2 col-sm-6">                         <label for="network">network <span>*</span></label>                         <select #networkinput class="form-control" #nw id="network" required [(ngmodel)]="model.network"                                 name="networkinput" #network="ngmodel" (change)="onchange($event)">                           <option value="" disabled selected>choose network</option>                           <option *ngfor="let network of networks" value="{{network.network}}"                                   attr.data-hostname="{{network.network}}">{{network.network}}</option>                         </select>                       </div>                     </div>         <div class="form-group">                           <div class="col-lg-3 col-md-3 col-sm-6">                             <label for="finalhostname">hostname</label>                             <input #finalhostname="ngmodel" type="text" class="form-control" id="finalhostname"                                    [(ngmodel)]="model.finalhostname"  name="finalhostname" placeholder="autogenerated hostname" disabled>                           </div>                         </div>                       </div>                   <div class="form-group">                           <div class="col-lg-2 col-md-2 col-sm-6">                             <label for="input">add</label>                             <div class="input-group">                               <input type="number" min="1" class="form-control" id="input" [(ngmodel)]="input"                                      (ngmodelchange)="updaterange($event)" name="input">                             </div>                           </div>                         </div>      <pre>       {{ models | json }}     </pre> 

the hostname depends on value selected in network select:

json:

  [             { "network": "nw 1", "hostname": "host 1" },             { "network": "nw 2", "hostname": "host 2" },             { "network": "nw 3", "hostname": "host 3" },        ] 

the function updaterange adds many accordion-groups, user types input field.

use [(ngmodel)]="finalhostname"instead. way bind class property "finalhostname" input field.