在输入字段中显示选定的对象值答案

【问题标题】：To display selected object values in the input field在输入字段中显示选定的对象值
【发布时间】：2019-02-15 18:47:10
【问题描述】：

我有一个名为 customers 的 JSON 文件，我在 dropdown 中显示客户，在 dropdown 中当我选择特定客户时，如何在输入字段中显示所选客户的详细信息像这样：

HTML

<mat-form-field>
  <mat-select placeholder="Select Customer">
    <mat-option *ngFor="let customer of customers" [value]="customer.id">
      {{customer.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field>
    <input matInput placeholder="Name" matInput >
</mat-form-field>
<mat-form-field>
   <input matInput  placeholder="Email" matInput >
</mat-form-field>

import { Component, OnInit } from '@angular/core';
import { ContactService } from '../contacts.service';
import { ICustomer } from '../models';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
  public customers: ICustomer;
  constructor(private myService: ContactService) { }

  public async ngOnInit(): Promise<void> {
    this.customers = await this.myService.getCustomers('');
  }


}

服务文件(contacts.service.ts)

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ICustomer } from './models';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class ContactService {
  private baseUrl: string = '../../assets/customers.json';

  constructor(private http: HttpClient) { }


  public getCustomers(id: string): Promise<ICustomer> {
    const apiUrl: string = '../../assets/customers.json';

    return this.http.get<ICustomer>(apiUrl + id).toPromise();
  }

}

DEMO

【问题讨论】：

StackBlitz 对 Angular 问题非常有用，但请在问题本身中添加最相关的代码部分，因为链接可能会失效，变得无效，从而对下一个读者失去价值。

标签： angular typescript

【解决方案1】：

您需要将模板更新为此


<div class="main-div">
<mat-form-field>
  <mat-select placeholder="Select Customer" [(ngModel)]="customer">
    <mat-option *ngFor="let customer of customers" [value]="customer">
      {{customer.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field>
    <input matInput placeholder="Name" matInput [value]="customer?.name" >
</mat-form-field>

<mat-form-field>
   <input matInput  placeholder="Email" matInput [value]="customer?.email" >
</mat-form-field>

</div>

【讨论】：

【解决方案2】：

我用 mat-select 的 change 事件更新你的代码

<div class="main-div">
<mat-form-field>
  <mat-select placeholder="Select Customer" (selectionChange)="update($event)">
    <mat-option *ngFor="let customer of customers" [value]="customer.id">
      {{customer.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field>
    <input matInput placeholder="Name" matInput [(ngModel)]= "name">
</mat-form-field>
<mat-form-field>
   <input matInput  placeholder="Email" matInput [(ngModel)]= "email">
</mat-form-field>

</div> 

export class ListComponent implements OnInit {
  public customers: ICustomer;
  name: any;
  email: any;
  constructor(private myService: ContactService) { }

  public async ngOnInit(): Promise<void> {
    this.customers = await this.myService.getCustomers('');
  }

  update(event){
    debugger;
    //alert(event.value)
    //alert(JSON.stringify(this.customers))
    let customer = <Array<any>>this.customers;
    let sec = customer.filter(c=>c.id == event.value);
    //alert(this.customers[event.value]);
    //alert(JSON.stringify(sec));
    //alert(sec.name)
    this.name = sec[0].name;
    this.email = sec[0].email;
    //alert(JSON.stringify(event));
  }
}

代码在这里：

https://stackblitz.com/edit/angular-movie-read-load-json-sample-eg-k9ib58

【讨论】：