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

Question

我有一个名为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>

TS

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

Answer 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> 

Answer 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