Angular 如何在一个表单中使用两个mat芯片列表，从两个单独的数据库表中提取数据？

我正在写一个表单，根据输入的条件执行搜索。我关注的是学校和招聘阶段。学校和招聘阶段都将被列为一份芯片清单，这样就可以选择多个选项。学校在运转，但出租屋却不运转。我怎样才能让它们都以相同的形式作为mat芯片列表

HTML

姓名：
主修：
学校
{{学校}
取消
{{school.schoolName}
租用阶段
{{hireStage}}
取消
{{hireStage.stageName}
2.
3.
4.
{{hireStage.stageName}

.ts

从'@angular/common'导入{Location}；
从'src/app/services/database services/School'导入{School}；
从'@angular/forms'导入{FormGroup，FormControl}；
从'src/app/services/database services/school.service'导入{SchoolService}；
从'src/app/services/database services/HireStage'导入{HireStage}；
从'src/app/services/database services/hirestage.service'导入{HireStageService}；
从'@angular/cdk/keycodes'导入{ENTER，COMMA}；
从“rxjs”导入{Observable}；
从“@angular/material/autocomplete”导入{MatAutocompleteTrigger，matautocompletetselectedevent}；
从“@angular/material”导入{MatChipInputEvent}；
@组成部分({
选择器：“发送电子邮件模板”，
templateUrl:“./send email templates.html”，
样式URL:['./发送电子邮件模板.css']，
})
导出类SendEmailTemplatesComponent实现OnInit{
//这是存放学校的地方
公共学校资料来源：学校[]；
公共租房来源：租房[]；
//用于学校和租用舞台选择的材料//
可见=真实；
可选=真；
可移动=真；
addOnBlur=true；
separatoreyscodes:number[]=[输入，逗号]；
schoolCtrl=newformcontrol（）；
//这是显示的数组
学校：字符串[]=[]；
所有学校：学校[]；
所有地产：地产[]；
HiRestates:字符串[]=[]；
hireStageCtrl=新表单控件（）；
//要搜索的学校和租用阶段的Id列表//
学童：数字[]=[]；
员工名单：编号[]=[]；
@ViewChild（'schoolInput'，{static:false}）schoolInput:ElementRef；
@ViewChild（'auto'，{static:false}）matAutocomplete:matAutocomplete；
@ViewChild（'hireStageInput'，{static:false}）hireStageInput:ElementRef；
@ViewChild（'auto1'，{static:false}）matAutocomplete1:MatAutocomplete；
//@ViewChild（MatAutocompleteTrigger，{static:false}）触发器：MatAutocompleteTrigger；
searchForm=newformgroup({
});
建造师(
私立学校服务：学校服务，
私人雇佣服务：雇佣服务，
) { }
恩戈尼尼特（）{
这个。getSchools（）；
这个。gethirestates（）；
}
getSchools（）：无效{
this.schoolService.getSchools（）.subscribe（schools=>{
this.schoolSource=学校；
为了（让学校了解这一点。学校来源）{
console.log（school.schoolName）；
}
console.log（this.schools.length）
});
}
gethirestates（）：void{
this.hirestateservice.gethirestates（）.subscribe（hirestates=>{
this.hirestatesource=hirestates；
for（让我们看看这个阶段。hireStageSource）{
console.log（stage.stageName）
console.log（this.hirestates.length）
}
});
}
removeSchool（学校：字符串）：无效{
const index=this.schools.indexOf（school）；
如果（索引>=0）{
本.学校.拼接（索引，1）；
this.schooloidlist.splice（索引，1）；
}
}
再投资（hireStage:字符串）：无效{
const index=this.hirestates.indexOf（hireStage）；
如果（索引>=0）{
此.hirestates.splice（索引，1）；
hirestagedList.splice（索引1）；
}
}
selectedSchool（事件：MatAutocompleteSelectedEvent）：无效{
如果（！this.schools.includes（event.option.viewValue））{
this.schools.push（event.option.viewValue）
this.schooldlist.push（event.option.value）；
}
this.schoolInput.nativeElement.value=''；
this.schoolCtrl.setValue（null）；
document.getElementById（'firstName'）。单击（）；
}
selectedStage（事件：MatAutocompleteSelectedEvent）：无效{
如果（！this.hirestates.includes（event.option.viewValue））{
this.hirestates.push（event.option.viewValue）
this.hireStageIdList.push（event.option.value）；
}
this.hireStageInput.nativeElement.value=''；
this.hireStageCtrl.setValue（null）；
document.getElementById（'firstName'）。单击（）；
}
    <mat-grid-tile colspan="4" rowspan="4">
        <div class='eForm'>
            <form [formGroup]='searchForm' autocomplete='off' novalidate (ngSubmit)="onSubmit()">
                <mat-form-field class="nameSearch">
                    <span matPrefix>Name:&nbsp;</span>
                    <input matInput id = 'firstName' placeholder="&nbsp;Enter candidate name">
                </mat-form-field>
                <mat-form-field class="majorSearch">
                    <span matPrefix>Major:&nbsp;</span>
                    <input matInput placeholder="&nbsp;Enter candidate major">
                </mat-form-field>

                <tr>
                    <mat-form-field *ngIf = "schoolSource" class="schools">
                        <mat-label>Schools</mat-label>
                        <mat-chip-list #chipList>
                            <mat-chip *ngFor = "let school of schools"
                            [selectable] = "true"
                            [removable] = "true"
                            (removed) = "removeSchool(school)">
                            {{ school }}
                            <mat-icon matChipRemove *ngIf = "removable">cancel</mat-icon>
                            </mat-chip>
                            <input placeholder = "Choose school(s)" #schoolInput
                                [formControl] = "schoolCtrl"
                                [matAutocomplete]="auto"
                                [matChipInputFor]="chipList"
                                [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                                [matChipInputAddOnBlur]="addOnBlur">
                        </mat-chip-list>

                        <mat-autocomplete #auto (optionSelected)="selectedSchool($event)">
                            <mat-option *ngFor="let school of schoolSource"
                            [value] = 'schoolId'>
                            {{ school.schoolName }}
                            </mat-option>
                        </mat-autocomplete>
                    </mat-form-field>

                    <mat-form-field *ngIf = "hireStageSource" class="hireStages">
                        <mat-label>Hire Stage</mat-label>
                        <mat-chip-list #chipList1>
                            <mat-chip *ngFor = "let hireStage of hireStages"
                            [selectable] = "true"
                            [removable] = "true"
                            (removed) = "removeStage(hireStage)">
                            {{ hireStage }}
                            <mat-icon matChipRemove *ngIf = "removable">cancel</mat-icon>
                            </mat-chip>
                            <input placeholder = "Choose Hire Stage(s)" #hireStageInput
                            [formControl] = "hireStageCtrl"
                            [matAutoComplete] = "auto1"
                            [matChipInputFor] = "chipList1"
                            [matChipInputSeparatorKeyCodes] = "separatorKeysCodes"
                            [matChipInputAddOnBlur] = "addOnBlur">
                        </mat-chip-list>

                        <mat-autocomplete #auto1 (optionSelected) = "selectedStage($event)">
                            <mat-option *ngFor = "let hireStage of hireStageSource"
                            [value] = 'stageId'>
                            {{ hireStage.stageName }}
                            </mat-option>
                        </mat-autocomplete>
                        <!-- <mat-select [(value)]="stageId">
                            <mat-option id=stageId *ngFor="let hireStage of hireStages" [value]="hireStage.stageId">
                                {{hireStage.stageName}}
                            </mat-option>
                        </mat-select> -->
                    </mat-form-field>
                </tr>
                <mat-form-field class="startDate">
                    <input matInput [matDatepicker]="picker" placeholder="Choose a start date"
                        id="startDate" name="startDate">
                    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                    <mat-datepicker #picker></mat-datepicker>
                </mat-form-field>

                <mat-form-field class="endDate">
                    <input matInput [matDatepicker]="picker2" placeholder="Choose an end date"
                        id="endDate" name="endDate">
                    <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
                    <mat-datepicker #picker2></mat-datepicker>
                </mat-form-field>
            </form>
        </div>
    </mat-grid-tile>
    <mat-grid-tile colspan="6" rowspan="4">2</mat-grid-tile>
    <mat-grid-tile colspan="4" rowspan="6">3</mat-grid-tile>
    <mat-grid-tile colspan="6" rowspan="6">4</mat-grid-tile>
</mat-grid-list>
<div *ngIf="hireStageSource">
    <div *ngFor='let hireStage of hireStageSource'> {{hireStage.stageName}} </div>
</div>

import { Location } from '@angular/common';
import { School } from 'src/app/services/database-services/school';
import { FormGroup, FormControl } from '@angular/forms';
import { SchoolService } from 'src/app/services/database-services/school.service';
import { HireStage } from 'src/app/services/database-services/hirestage';
import { HireStageService } from 'src/app/services/database-services/hirestage.service';
import { ENTER, COMMA } from '@angular/cdk/keycodes';
import { Observable } from 'rxjs';
import { MatAutocomplete, MatAutocompleteTrigger, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
import { MatChipInputEvent } from '@angular/material';

@Component({
    selector: 'send-email-templates',
    templateUrl: './send-email-templates.html',
    styleUrls: ['./send-email-templates.css'],
})
export class SendEmailTemplatesComponent implements OnInit {

        //this is where schools are stored
    public schoolSource: School[];
    public hireStageSource: HireStage[];



    // Stuff for school & hire stage selection //
    visible = true;
    selectable = true;
    removable = true;
    addOnBlur = true;
    separatorKeysCodes: number[] = [ENTER, COMMA];
    schoolCtrl = new FormControl();
        //this is the array that gets displayed
    schools: string[] = [];
    allSchools: School[];
    allHireStages: HireStage[];
    hireStages: string[] = [];
    hireStageCtrl = new FormControl();

    // List of Id's for schools and hire stages to be searched //
    schoolIdList: number[] = [];
    hireStageIdList: number[] = [];
    @ViewChild('schoolInput', {static: false}) schoolInput: ElementRef<HTMLInputElement>;
    @ViewChild('auto', {static: false}) matAutocomplete: MatAutocomplete;
    @ViewChild('hireStageInput', {static: false}) hireStageInput: ElementRef<HTMLInputElement>;
    @ViewChild('auto1', {static: false}) matAutocomplete1: MatAutocomplete;
    // @ViewChild(MatAutocompleteTrigger, {static: false}) trigger: MatAutocompleteTrigger;

    searchForm = new FormGroup({

    });

    constructor(
        private schoolService: SchoolService,
        private hireStageService: HireStageService,
    ) { }


    ngOnInit() {
        this.getSchools();
        this.getHireStages();
    }

    getSchools(): void {
        this.schoolService.getSchools().subscribe(schools => {
        this.schoolSource = schools;
        for(let school of this.schoolSource){
            console.log(school.schoolName);
        }
        console.log(this.schools.length)
        });
    }

    getHireStages(): void {
        this.hireStageService.getHireStages().subscribe(hireStages => {
        this.hireStageSource = hireStages;
        for(let stage of this.hireStageSource){
            console.log(stage.stageName)
            console.log(this.hireStages.length)
        }
        });
    }

    removeSchool(school: string): void {
        const index = this.schools.indexOf(school);
        if (index >= 0) {
            this.schools.splice(index, 1);
            this.schoolIdList.splice(index, 1);
        }
    }

    removeStage(hireStage: string): void {
        const index = this.hireStages.indexOf(hireStage);
        if (index >= 0) {
            this.hireStages.splice(index, 1);
            this.hireStageIdList.splice(index, 1);
        }
    }

    selectedSchool(event: MatAutocompleteSelectedEvent): void {
        if (!this.schools.includes(event.option.viewValue)) {
            this.schools.push(event.option.viewValue)

            this.schoolIdList.push(event.option.value);
        }
        this.schoolInput.nativeElement.value = '';
        this.schoolCtrl.setValue(null);
        document.getElementById('firstName').click();
    }

    selectedStage(event: MatAutocompleteSelectedEvent): void {
        if (!this.hireStages.includes(event.option.viewValue)) {
            this.hireStages.push(event.option.viewValue)

            this.hireStageIdList.push(event.option.value);
        }

        this.hireStageInput.nativeElement.value = '';
        this.hireStageCtrl.setValue(null);
        document.getElementById('firstName').click();
    }

    private _filter(value: School): School[] {
        return this.allSchools.filter(school => this.allSchools.indexOf(school) === 0);
    }

    private _filter1(value: HireStage): HireStage[] {
        return this.allHireStages.filter(hireStage => this.allHireStages.indexOf(hireStage) === 0);
    }

}```