Autodesk Forge 将输入元素添加到 Forge 按钮

Question

我想动态地将输入元素添加到按钮并基于 Angular 绑定，将输入绑定到查看器中的选定对象。到目前为止我尝试过的内容如下所示。输入元素显示没有任何问题。但是，我无法访问生成的输入元素，无法输入。 有什么建议可以解决吗？

public loadMobileToolbar() {
    /////////////////////// Facade ///////////////////////
    // @ts-ignore
    var button1 = new Autodesk.Viewing.UI.Button('mobile-text-button-facade');
    var button2 = new Autodesk.Viewing.UI.Button('mobile-coloring');
    button1.onClick = (event) => {
        console.log(this.input);
        $('#mobile-text-button-facade').attr('data-before', '');
        $('#mobile-text-button-facade').html('<input style="z-index: 100000" class="custom-input" type="text" [(ngModel)]="input.facade" (change)="onChange($event)" spellcheck="false">');
    };
    button2.onClick = (event) => {
        this.showValuesOfParameter('facade');
    };
    button2.addClass('mobile-coloring');
    // @ts-ignore
    button2.container.children[0].classList.add('fas', 'fa-palette');

    // Button 4 Textfeld
    button1.addClass('mobile-text-button-facade');
    // SubToolbar
    var controlGroupMobile = new Autodesk.Viewing.UI.ControlGroup('mobile-custom-toolbar');
    // controlGroupERP.addControl(button3);
    controlGroupMobile.addControl(button1);
    controlGroupMobile.addControl(button2);

    this.toolbarMobile = new Autodesk.Viewing.UI.ToolBar('my-custom-view-toolbar-mobile-facade', {
        collapsible: false,
        alignVertically: false
    });
    this.toolbarMobile.addControl(controlGroupMobile);

    $(this.viewerComponent.viewer.container)[0].append(this.toolbarMobile.container);
    $('#mobile-text-button-facade').attr('data-before', 'Facade');
}

Answer 1

    var filterbox = new Autodesk.Viewing.UI.Filterbox('mobile-filterbox', { filterFunction: this.testing });
    var controlGroupMobileInput = new Autodesk.Viewing.UI.ControlGroup('mobile-custom-toolbar-input');
    controlGroupMobileInput.addControl(filterbox);

buttonFilter.onClick = (event) => {
      if (!this.input.objectPath && this.viewerComponent.viewer.getSelectionCount() === 0) {
        $('.filter-box.docking-panel-delimiter-shadow').val('');
        button1.setState(1);
        button7.setState(1);
        // tslint:disable-next-line: no-use-before-declare
        button3.setState(1);
        // tslint:disable-next-line: no-use-before-declare
        button9.setState(1);
        // tslint:disable-next-line: no-use-before-declare
        button5.setState(1);
        $('#mobile-custom-toolbar-input').hide();
        this.whichInput = '';
      }
      else if (this.viewerComponent.viewer.getSelectionCount() > 1 && this.redSelectedDbIDs.length === 0) {
        this.multiSelectedMobileInput.forEach(input => {
          if (this.whichInput === 'u' || this.whichInput === 'v') {
            input[this.whichInput] = Number($('.filter-box.docking-panel-delimiter-shadow').val());
          }
          else if (this.whichInput === 'additionalParameter') {
            input[this.whichInput][0].value = $('.filter-box.docking-panel-delimiter-shadow').val();
          }
          else {
            input[this.whichInput] = $('.filter-box.docking-panel-delimiter-shadow').val();
          }
        });
        this.api.saveMultipleInput(this.multiSelectedMobileInput).then(
          res => {
            if (res === null) {
              this.messageService.add({ key: 'warning', severity: 'error', summary: 'Error', detail: 'Something went wrong with SAVING' });
            }
            else {
              this.api.getAllInputs(this.platform.currentProject._id).then(
                inputs => {
                  this.inputs = inputs;
                  // @ts-ignore
                  this.messageService.add({ key: 'warning', severity: 'success', summary: 'Success', detail: res.modified + ' INPUT was UPDATED', life: 5000 });
                  this.viewerComponent.viewer.clearThemingColors(this.viewerComponent.viewer.model);
                  this.editTable = false;
                  this.unsavedChanged = false;
                }
              );
            }
          }
        );
        this.multiSelectedMobileInput = new Array();
        this.viewerComponent.viewer.clearSelection();
        $('.filter-box.docking-panel-delimiter-shadow').val('');
        button1.setState(1);
        button7.setState(1);
        // tslint:disable-next-line: no-use-before-declare
        button3.setState(1);
        // tslint:disable-next-line: no-use-before-declare
        button9.setState(1);
        // tslint:disable-next-line: no-use-before-declare
        button5.setState(1);
        $('#mobile-custom-toolbar-input').hide();
        this.whichInput = '';
      }
      else if (this.redSelectedDbIDs.length !== 0) {
        this.redSelectedDbIDs.forEach(dbId => {
          this.viewerComponent.viewer.model.getProperties(dbId, (r) => {
            var tempInput = this.inputs.find(ele => {
              if (ele.objectPath.indexOf('/')) {
                return ele.objectPath.split('/')[ele.objectPath.split('/').length - 1] === r.name;
              }
              else {
                return ele.objectPath === r.name;
              }
            });
            this.multiSelectedMobileInput.push(tempInput);
          });
        });
        setTimeout(() => {
          this.multiSelectedMobileInput.forEach(input => {
            if (this.whichInput === 'u' || this.whichInput === 'v') {
              input[this.whichInput] = Number($('.filter-box.docking-panel-delimiter-shadow').val());
            }
            else if (this.whichInput === 'additionalParameter') {
              input[this.whichInput][0].value = $('.filter-box.docking-panel-delimiter-shadow').val();
            }
            else {
              input[this.whichInput] = $('.filter-box.docking-panel-delimiter-shadow').val();
            }
          });
          this.api.saveMultipleInput(this.multiSelectedMobileInput).then(
            res => {
              if (res === null) {
                this.messageService.add({ key: 'warning', severity: 'error', summary: 'Error', detail: 'Something went wrong with SAVING' });
              }
              else {
                this.api.getAllInputs(this.platform.currentProject._id).then(
                  inputs => {
                    this.inputs = inputs;
                    // @ts-ignore
                    this.messageService.add({ key: 'warning', severity: 'success', summary: 'Success', detail: res.modified + ' INPUT was UPDATED', life: 5000 });
                    this.viewerComponent.viewer.clearThemingColors(this.viewerComponent.viewer.model);
                    this.editTable = false;
                    this.unsavedChanged = false;
                  }
                );
              }
            }
          );

Answer 2

在没有 Angular 绑定的情况下添加 <input> 似乎工作正常：

您可能需要在 Angular 社区中询问有关绑定的信息。