时间戳

首页 > 解决方案 > 选择数据时，视图中的详细信息会被破坏。使用角 6

angular - 选择数据时，视图中的详细信息会被破坏。使用角 6

问题描述

我的代码有问题，当我选择要在视图中显示其他详细信息的数据时。

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

例如，我有一些客户：

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. 选择名称 1 时，详细显示电话：1234656。地址：St. GWBush, London
  2. 选择名称 2 时，详细显示电话：2222222。地址：St. GW, NY
  3. 选择名称 3 时，详细显示电话：1234656。地址：St. GWBush, 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示例

请问有什么想法吗？

标签： angulartypescriptmaterialize

解决方案

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

  • 直接使用对象*ngFor并将其绑定到，[ngValue]而不是[value]支持绑定到对象，因为[value]绑定仅限于原始类型（如字符串和数字）。
  • 摆脱change事件绑定以及它所绑定的方法。
  • 引用选定对象时，在模板中使用安全导航运算符 (?.) 和空属性路径。您还可以将整个块包含<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>

推荐阅读