Question

我有两个Angular2 Material 2 Autocomplete字段：客户和分支机构。因此，当用户现在在第一个字段中选择一个特定客户时，我想从我的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;
    });
}

createHardware.component.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];
    });
}

<强> WORKING EXAMPLE

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

Answer 2

将 component.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>

在 component.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

}

希望这可以解决您的要求。

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

2 个答案: