选择数据时，视图中的细节会被打碎。使用 Angular 6

Question

我的代码有问题，当我 select 一个数据时，我想在视图中显示其他细节。

在第一个 select 中，显示正确的细节。在第二个 select 中，显示第一个和第二个数据并在视图中被打碎。

比如我有一个客户：

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

当Select姓名1时，详情显示电话：1234656。地址：St.G.W.Bush, London
当Select姓名2时，详细显示电话：2222222。地址：St.G.W, NY
当Select姓名3时，详细显示电话：1234656。地址：St.G.W.Bush, London

我的html代码：

 <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 组件：

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

我创建了这个 Demo 示例

有什么想法吗？

Answer 1

您应该从以下位置删除：

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

的一部分：[(ngModel)] 它弄乱了您的数据，您不需要双向绑定，因为您只显示数据的选定值。我已经在您的示例中对其进行了测试，并且可以正常工作。
祝你好运！

Answer 2

你让它变得比它需要的更复杂。

直接使用 *ngFor 中的对象并将其绑定到 [ngValue] 而不是 [value] 支持绑定到对象，因为 [value] 绑定仅限于原始类型仅（如字符串和数字）。
删除 change 事件绑定及其绑定的方法。
引用所选对象时在模板中使用 safe navigation operator ( ?. ) and null property paths。您还可以将整个块包含在 <div *ngIf="selecteditem"> 中，其中内部 html 对选择进行一些处理。这是相关的和更改的模板代码：

见stackblitz

<fieldset>
  <legend>Data:</legend>
  <div class="input-field col s12">
    <select [(ngModel)]="selecteditem" name="id_item" formControlName="id_item" id="id_item" materialize="material_select">
      <option value="" disabled selected>Name :</option>
      <option *ngFor="let item of options" [ngValue]="item">{{item.name}}</option>
    </select>
  </div>
  <br>
  <div class="input-field col s12">
     id:<p>{{selecteditem?.id_item}}</p>
    <br>
  </div>
  <br>
  <div class="input-field col s12" >
    Adress:<p>{{selecteditem?.adress}}</p>
    <br>
  </div>
</fieldset>

选择数据时，视图中的细节会被打碎。使用 Angular 6

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

materialize

typescript

angular