Mongodb 角度材质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;
    });
}

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

}

myControlCustomers:FormControl=newformcontrol（）；
availableCustomers=[]；
过滤客户：可观察；
selectedCustomers=null；
SelectedCustomerName=''；
this.availableCustomers=[]；
this.customerService.getCustomers（）.subscribe（客户=>{
this.availableCustomers=customers.customer；
});
this.filteredCustomers=this.myControlCustomers.valueChanges
.烟斗(
startWith（“”），
map（valCustomer=>this.filterCustomers（valCustomer））
);
filterCustomers（valCustomer:any）：any[]{
返回此.availableCustomers.filter（客户=>{
返回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>

{{customer.name}

将您的组件.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>

{{customer.name}
{{branch.name}

并在组件中定义以下内容。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;
    });
}

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

}

myControlCustomers:FormControl=newformcontrol（）；
availableCustomers=[]；
过滤客户：可观察；
所选客户：任何；
MyControlBranchs:FormControl=new FormControl（）；
可用支路=[]；
过滤枝：可见；
所选分支：任意；
this.filteredCustomers=this.myControlCustomers.valueChanges
.烟斗(
startWith（“”），
映射（val=>this.filterCustomers（val））
);
filterCustomers（val:any）：any[]{
让name=val.name？val.name:val；
返回此.availableCustomers.filter（客户=>{
返回customer.name.toLowerCase（）.indexOf（name.toLowerCase（））>-1；
});
}
this.filteredBranches=this.myControlBranches.valueChanges
.烟斗(
startWith（“”），
map（val=>this.filterBranches（val））
);
filterBranches（val:any）：any[]{
让name=val.name？val.name:val；
返回此.availableBranches.filter（分支=>{
返回branch.name.toLowerCase（）.indexOf（name.toLowerCase（））>-1；
});
}
displayFnCustomer（客户：任意）：字符串{
退货客户？客户名称：客户；
}
displayFnBranch（分支：任意）：字符串{
返回分支机构？分支机构。名称：分支机构；
}
GetBranchs（客户）{
this.selectedCustomer=customer；
//在这里，您可以使用customer.\u id获取分支
//这是http。。。。
}
GETXX（分行）{
this.selectedBranch=branch；
//在这里，您可以使用branch.\u id，如果您想用于任何目的
}

---

希望这能解决您的需求。

这里我已经根据您的问题制作了完整的工作示例

模板端：

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

---

希望这能消除您的疑虑。

mongoose功能在查找特定客户的帖子时会是什么样子？@Sithys，这就是为什么我创建了

getPosts

作为您的帖子，我正在传递所选用户的id，在此基础上我将查找帖子。@Sithys，很高兴知道，高兴编码BTW:）