Question

我有一个使用Angular创建的网站。我有一个带有下拉列表的页面，使用（ngModelChange），该页面根据第一个下拉列表中选择的内容填充了另一个下拉列表数据。如果未选择任何内容，它将使用所有数据填充下拉列表。

我有一个reste按钮，该按钮删除那些下拉菜单使用的“选定项目”数组的内容（以重置它们并使它们不被选中）。

我需要一种按此顺序执行此操作的方法：

重置所选项目
在下拉菜单2中插入内容

问题是，代码已执行，并且此内容已正确放置在下拉菜单中，但此后DOM似乎已呈现，并且重置的选定项目触发了它（ngModelChange），因此将错误的内容放入了我的下拉列表中。

如何避免这种情况？

这是一些代码：

HTML

                <div class="form-group col-md-6">
                    <label for="linkedCpt">(Search by Competence)</label>
                    <ng-multiselect-dropdown
                    [placeholder]="'Select a Competence'"
                    [data]="dropdownCompetencesList"
                    [(ngModel)]="selectedCompetencesItems"
                    [settings]="dropdownCompetencesSettings"
                    (onSelect)="onItemSelect($event)" (ngModelChange)="fillTypeFormationDropdown($event)"
                    (onSelectAll)="onSelectAll($event)"
                    name="idCpt"
                    >
                    </ng-multiselect-dropdown>
                </div>

                <div class="form-group col-md-6">
                    <label for="linkedCpt">Type Formation</label>
                    <ng-multiselect-dropdown
                    [placeholder]="'Select a type formation'"
                    [data]="dropdownTypesFormationList"
                    [(ngModel)]="selectedTypesFormationItems"
                    [settings]="dropdownTypesFormationSettings"
                    (onSelect)="onItemSelect($event)"
                    (onSelectAll)="onSelectAll($event)"
                    name="idTypeFormation"
                    >
                    </ng-multiselect-dropdown>
                </div>

TS

fillTypeFormationDropdown(item: any){

this.dropdownTypesFormationList = [];
this.selectedTypesFormationItems = [];

if (this.selectedCompetencesItems && this.selectedCompetencesItems.length > 0){
  this.serviceFormationRequise.getAllByCompetence("GetByCompetence", this.selectedCompetencesItems[0]['idCpt'])
  .subscribe(response =>  {
      this.sharedSnackBarMessage.changeMessage("TypesFormation sucessfully received");
      this.snackBarService.openSuccessSnackBar(SnackbarMessageComponent);

      this.typeFormationCompetences = response as any;
      //Filling multiselect dropdown
      let dropdown = [];
      this.typeFormationCompetences.forEach(element => {          
        dropdown.push({idTypeFormation: element.idTypeFormation, nomTypeFormation: element.nomTypeFormation });
      }); 
      this.dropdownTypesFormationList = dropdown;
  });
} else {
  if (this.TYPEFORMATION_DATA && this.TYPEFORMATION_DATA.length){
  let dropdown = [];
  this.TYPEFORMATION_DATA.forEach(element => {          
    dropdown.push({idTypeFormation: element.idTypeFormation, nomTypeFormation: element.nomTypeFormation });
  }); 
  this.dropdownTypesFormationList = dropdown;
  }
}
}

resetForm(){
 this.selectedCompetencesItems = [];
 this.selectedTypesFormationItems = [];
}

新方法

newMethod(input: any){
 this.resetForm();
 this.selectedTypesFormationItems.push({idTypeFormation: input.idTypeFormation, nomTypeFormation: input.nomTypeFormation });
}

ngModelChange触发问题

0 个答案: