When data is selected, details in view are shattered. using Angular 6

Question

I have a problem in my code, when I select a data I want to show other details in view.

In first select, show correct detail. In second select, show first and second data and in view are shattered.

For example, I have some client:

1. Client Name: Name 1. Telephone: 1234656. Adress: St. G.W.Bush, London
2. Client Name: Name 2. Telephone: 2222222. Adress: St. G.W, NY
3. Client Name: Name 3. Telephone: 3333333. Adress: St. A.B, Cuba
4. Client Name: Name 4. Telephone: 4444444. Adress: St. G.P.L, Germany

1. When Select Name 1, in detals show Telephone: 1234656. Adress: St. G.W.Bush, London
2. When Select Name 2, in details show Telephone: 2222222. Adress: St. G.W, NY
3. When Select Name 3, in details show Telephone: 1234656. Adress: St. G.W.Bush, London

My html code:

 <div class="input-field col s4">
    <fieldset>
      <legend>Data:</legend>
      <div class="input-field col s12">
        <select (change)="onSelect($event.target.value)" [(ngModel)]="selectedClient.client_id" formControlName="client_id" id="client_id"
          materialize="material_select" [materializeSelectOptions]="client">
          <option value="" disabled selected>Name :</option>
          <option *ngFor="let item of client" [value]="item.client_id">{{item.clientName}}</option>
        </select>
      </div>
      <br>
      <div class="input-field col s12">
        Telephone:
        <p>{{selectedClient.contactNo}}</p>
        <br>
      </div>
      <br>
      <div class="input-field col s12" >
        Adress:
        <p>{{selectedClient.address}}</p>
        <br>
      </div>
    </fieldset>
  </div>

TS Component:

 onSelect(clientid) {
  let selectedClient = new Client('')
   this.selectedClient = null;
    for (let i = 0; i < this.client.length; i++) {
      if (this.client[i].client_id === clientid) {
        this.selectedClient = this.client[i];
       }
    }
  }

I create this Demo example

Any idea please?

Answer 1

You should remove from:

<select (change)="onSelectt($event.target.value)" 
 [(ngModel)]="selecteditem.id_item" formControlName="id_item" 
 id="id_item" materialize="material_select" 
>

the part of : [(ngModel)] it is messing your data and you dont need two way binding since you are only display the data selected value. I've tested it in your example and it is working.
Good luck!