javascript - 多次使用下拉列表中的值添加组件

Question

我在页面顶部有 3 个下拉菜单，旁边有一个按钮。每次单击下拉列表旁边的按钮，都应该从下拉列表中获取值并创建一个 Building 组件并将值传递给它。每次点击后，下拉菜单的值应设置为默认值。

我首先尝试创建一个组件数组，并在每次单击后将新组件推送到数组中。问题是，在使用 Input() 将数据传递给组件时，在将下拉菜单设置为 null 后，绑定数据被设置为 null。然后我尝试在没有输入的情况下传递数据，但是使用一个函数，但是这样我就无法在屏幕上看到它，即使使用 ChangeDetectorRef。

基于传递数据的函数的最后一个解决方案的代码如下。

你会解决这个问题吗？

<mat-form-field appearance="outline" class="dropdown">
            <mat-label translate="add-desks.building"></mat-label>
            <mat-select [(value)]="selectedBuilding" (selectionChange)="findFloors(selectedBuilding)" >
                <mat-option *ngFor="let building of buildingsAndFloors" [value]="building.name">{{building.name}}</mat-option>                
            </mat-select>
          </mat-form-field>          
          <mat-form-field appearance="outline" class="dropdown">
            <mat-label translate="add-desks.floor"></mat-label>
            <mat-select [(value)]="selectedFloor" (selectionChange)="findRooms(selectedBuilding, selectedFloor)" [disabled]="!selectedBuilding">
              <mat-option *ngFor="let floor of floors" [value]="floor">{{floor}}</mat-option>   
            </mat-select>
          </mat-form-field>
          <mat-form-field appearance="outline" class="dropdown">
            <mat-label translate="add-desks.room"></mat-label>
            <mat-select multiple [(value)]="selectedRoom" [disabled]="!(selectedBuilding&&selectedFloor)" >
              <mat-option *ngFor="let roomObj of rooms" [value]="roomObj.room">{{roomObj.room}}</mat-option>   
            </mat-select>
        </mat-form-field>
        <button class="add-localization" mat-stroked-button color="primary" (click)="addLocalization()" [disabled]="!(selectedBuilding&&selectedFloor&&selectedRoom)">
        <mat-icon class="plus-sign" matPrefix>add_circle</mat-icon>
            <span translate="add-desks.add-localization"></span>
        </button> 
    </div>
      <app-building *ngFor="let localization of localizations" [allLocalizations]="allLocalizations" (idsCheckedEvent)="receiveIds($event)" (idDeletedEvent)="deletedId($event)"></app-building>

localizations: BuildingComponent[] = [];
selectedBuilding: string;
selectedFloor: string;
selectedRoom: string;  
buildingsAndFloors = [];
floors = [];
allLocalizations = [];
rooms = [];
idsArray: string[];
project: ProjectRequest = {
  description: '',
  name: '',
  peopleUnitId: '310100',
  placesIDs: [],
  shortcut: ''
};

constructor(private router: Router, private location: Location, private route: ActivatedRoute, private service: ProjectsService, public cd: ChangeDetectorRef) {
  this.project.name = this.route.snapshot.queryParamMap.get('name');
  this.project.description = this.route.snapshot.queryParamMap.get('description');
  this.project.shortcut = this.route.snapshot.queryParamMap.get('shortcut');
}

ngOnInit(): void {
  this.getBuildingsAndFloors();
  this.getAllLocalizations();
}   

cancelConfirm(): void {
  if (confirm("Are you sure?")) {
    this.router.navigate(['/projects']);
  }
}

backClicked(): void {
  this.location.back();
}

receiveIds(idsArray: string[]) {
  this.project.placesIDs = this.project.placesIDs.concat(idsArray);
  this.project.placesIDs = Array.from(new Set(this.project.placesIDs));
}

deletedId(id: string): void {
  this.project.placesIDs = this.project.placesIDs.filter(element => element!== id);
}

addProjectWithDesks(): void {
  this.service.addProject(this.project)
    .subscribe(() => 
      this.router.navigate(['/projects']));
}

findFloors(selectedBuilding) {
  const found =  this.buildingsAndFloors.find(element => element.name === selectedBuilding);
  this.floors = found.floors;
}

findRooms(selectedBuilding, selectedFloor) {
  const foundBuilding =  this.allLocalizations.find(element => element.building === selectedBuilding);
  const foundFloor = foundBuilding.projectFloors.find(element => element.floor === selectedFloor);
  this.rooms = foundFloor.projectRooms;
}

getBuildingsAndFloors() {
  this.service.fetchBuildingsAndFloors().subscribe((buildingsAndFloors: BuildingsAndFloors[]) => {
    this.buildingsAndFloors = buildingsAndFloors;
  })
 
}

getAllLocalizations() {
  this.service.fetchAllLocalizations().subscribe((allLocalizations: Localization[]) => this.allLocalizations = allLocalizations);    
}

addLocalization() {
  let component = new BuildingComponent(this.cd);
  component.updateInputs(this.selectedBuilding, this.selectedFloor, this.selectedRoom, this.rooms);
  this.localizations.push(component);
  this.selectedBuilding = null;
  this.selectedFloor = null;
  this.selectedRoom = null;  
}
}```

标签： javascripthtmlangular