角度材质 2 - 选择另一个自动完成时填充自动完成

Question

我有两个 Angular2 Material 2 自动完成字段：客户和分支机构。因此，当用户现在在第一个字段中选择一个特定客户时，我想从我的mongoDB中检索具有用户所选客户的customerID的分支。

但我无法得到解决方案。

createHardware.component.ts

myControlCustomers: FormControl = new FormControl();
availableCustomers = [];
filteredCustomers: Observable<any[]>;
selectedCustomers = null;
selectedCustomersName = '';


this.availableCustomers = [];
this.customerService.getCustomers().subscribe(customers => {
this.availableCustomers = customers.customer;
});
this.filteredCustomers = this.myControlCustomers.valueChanges
.pipe(
startWith(''),
map(valCustomer => this.filterCustomers(valCustomer))
);
filterCustomers(valCustomer: any): any[] {
return this.availableCustomers.filter(customers => {
return customers.name.toLowerCase().indexOf(valCustomer.toLowerCase()) > -1;
});
}

创建硬件组件.html

<div class="form-group">
<mat-form-field class="example-full-width">
<input type="text" placeholder="Kunden auswählen" aria-label="Number" matInput [formControl]="myControlCustomers" [matAutocomplete]="auto2" [(ngModel)]="selectedCustomersName">
<mat-autocomplete #auto2="matAutocomplete">
<mat-option *ngFor="let customer of filteredCustomers | async" [value]="customer._id" (onSelectionChange)="getBranches()">
{{ customer.name }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>

Answer 1

在这里，我根据您的问题制作了整个工作示例，

模板端：

<form class="example-form">
<mat-form-field class="example-full-width">
<input type="text" placeholder="Selct User" aria-label="Number" matInput [formControl]="usersControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" (optionSelected)='getPosts($event.option.value)'>
<mat-option *ngFor="let user of users" [value]="user.id">
{{ user.name }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field class="example-full-width">
<input type="text" placeholder="Posts From User" aria-label="Number" matInput [formControl]="postsControl" [matAutocomplete]="auto2">
<mat-autocomplete #auto2="matAutocomplete">
<mat-option *ngFor="let post of posts" [value]="post.id">
{{ post.title }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>

组件侧 ：

usersControl: FormControl = new FormControl();
postsControl: FormControl = new FormControl();
users:any[] = [];
posts:any[] = [];
constructor(private http : HttpClient){
}
ngOnInit(){
let url = 'https://jsonplaceholder.typicode.com/users/';
this.http.get(`${url}`).subscribe(users => {
this.users = [...users];
});
}
getPosts(userId){
let url = 'https://jsonplaceholder.typicode.com/posts?userId='+userId;
this.http.get(`${url}`).subscribe(posts => {
this.posts = [...posts];
});
}

工作示例

希望这能消除你所有的疑虑。

Answer 2

将组件.html更改为

<div class="form-group">
<mat-form-field class="example-full-width">
<input type="text" placeholder="Kunden auswählen" aria-label="Number" matInput [formControl]="myControlCustomers" [matAutocomplete]="auto2" >
<mat-autocomplete #auto2="matAutocomplete" [displayWith]="displayFnCustomer">
<mat-option *ngFor="let customer of filteredCustomers | async" [value]="customer" (onSelectionChange)="getBranches(customer)">
{{ customer.name }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
<div class="form-group">
<mat-form-field class="example-full-width">
<input type="text" placeholder="Kunden auswählen" aria-label="Number" matInput [formControl]="myControlBranches" [matAutocomplete]="auto3" >
<mat-autocomplete #auto3="matAutocomplete" [displayWith]="displayFnBranch">
<mat-option *ngFor="let branch of filteredBranches | async" [value]="branch" (onSelectionChange)="getXXX(branch)">
{{ branch.name }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>

并在您的组件中定义以下内容.ts

myControlCustomers: FormControl = new FormControl();
availableCustomers = [];
filteredCustomers: Observable<any[]>;
selectedCustomer: any;
myControlBranches: FormControl = new FormControl();
availableBranches = [];
filteredBranches: Observable<any[]>;
selectedBranch: any;
this.filteredCustomers = this.myControlCustomers.valueChanges
.pipe(
startWith(''),
map(val => this.filterCustomers(val))
);
filterCustomers(val: any): any[] {
let name = val.name ? val.name : val;
return this.availableCustomers.filter(customer => {
return customer.name.toLowerCase().indexOf(name.toLowerCase()) > -1;
});
}
this.filteredBranches = this.myControlBranches.valueChanges
.pipe(
startWith(''),
map(val => this.filterBranches(val))
);
filterBranches(val: any): any[] {
let name = val.name ? val.name : val;
return this.availableBranches.filter(branch => {
return branch.name.toLowerCase().indexOf(name.toLowerCase()) > -1;
});
}
displayFnCustomer(customer: any): string {
return customer? customer.name : customer;
}
displayFnBranch(branch: any): string {
return branch? branch.name : branch;
}

getBranches(customer) {
this.selectedCustomer = customer;
// here you can use customer._id to fetch branches 
// this.http....
}
getXXX(branch) {
this.selectedBranch = branch;
// here you can use branch._id  if you want for any purpose
}

希望这能解决您的要求。