Question

我正在尝试使一组齿轮旋转，因为用户将等待其数据出现在表单字段中。目前，系统已设置为一次性收集所有数据，然后根据用户的下拉选择过滤数据。

  <div id='element-selection'>
    <mat-form-field appearance='outline'>
      <mat-select id='elementSelectionDropdown' panelClass='element-selection-width' #elementSelection='ngModel' #selectDropdown [ngModel]='elementSelection' placeholder='Select an Existing Element ({{elements?.length}})' (ngModelChange)='onElementSelected($event)'>
        <mat-option *ngFor='let element of elements' [value]='element.id'>
          {{element.title}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>

此功能调用处理的

：

onElementSelected(selectionId: string): void {
    this.isLoading = true; // start cogs spinning
    this.elementPanels.closeAll();
    this.isDisabled = false;

    this.currentElement = this.reformatElementObject(this.elements
      .find(element => element.id === selectionId));

    this.isLoading = false; // stop cogs spinning
    this.selectDropdown.value = []; // reset dropdown to selection request
    setTimeout(()=>this.isLoading = false, 1000);
  }

完整的运行可以在这里找到：

https://angular-y5dnwi.stackblitz.io

和此处的代码：

https://stackblitz.com/edit/angular-y5dnwi

已设置数据调用以针对每个选择对数据库进行调用，并且齿轮被触发以根据选择旋转，然后完成DB调用后，它们将停止旋转。现在，齿轮仅在页面加载期间旋转，这是可以预期的，考虑到调用仅在开始时发生。

我很好奇在过滤数据并填充其他表单字段时，是否有一种方法可以触发mat-select运行齿轮。如果您注意到，页面在过滤数据时似乎已锁定了一点。一旦做出选择并且表格已填满，是否有可能使齿轮旋转？

Angular 7和Mat-Select事件触发器

0 个答案: