将值/文本从表td传递到模式?

时间:2019-06-24 14:46:18

标签: angular

嗨,来自互联网的好人! 我无法将值/文本从表td传递给模式变量。

我尝试使用innerHTML和innerText,这是我唯一的解决方案 找到了,但是我得到的是“ [object HTMLTableCellElement]”,而不是实际的 表td中的值。

 HTML

 Table

  <table class="table table-striped table-light">
        <tr>
          <td #dado>Adress</td>
          <td>Rua Francisco Duarte Pedroso, 2B, 2º Esq</td>
          <td>
            <button type="button" rel="tooltip" class="btn btn-primary 
      btn-just-icon btn-sm" data-original-title="" title="" 
      (click)="openWindowCustomClass(content)">
              <i class="material-icons">edit</i>
            </button>
          </td>
        </tr>
        <tr>
          <td #dado>Postal Code</td>
          <td>1795-062, Algés</td>
          <td>
            <button type="button" rel="tooltip" class="btn btn-primary 
        btn-just-icon btn-sm" data-original-title="" title="" 
        (click)="openWindowCustomClass(content)">
              <i class="material-icons">edit</i>
            </button>
          </td>
        </tr>
   ----------------------------------------------------------------------
   Modal

   <ng-template #content let-modal>
     <div class="modal-header">
      <h4 class="modal-title">Alterar {{ dado }}</h4>
      <button type="button" class="close" aria-label="Close" 
        (click)="modal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
      </div>
      <div class="modal-body">
        <label for="editing">Nova {{ data }}</label>
        <input type="text" class="form-control" placeholder="Introduza a 
        nova {{ data }}" (input)="updateData($event)">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-success" 
        (click)="modal.save('saveClick')">Save</button>
        <button type="button" class="btn btn-danger" 
        (click)="modal.close('Close click')">Close</button>
     </div>
     </ng-template>

    --------------------------------------------------------------------

    Typescript

  openWindowCustomClass(content) {
     this.modalService.open(content, { windowClass: 'dark-modal' });
     this.dado = document.getElementById(this.dado).innerHTML;     
  }

2 个答案:

答案 0 :(得分:0)

如果您使用的是angular或angularjs,则应将其功能用于click事件等。 假设这样做,您应该通过组件或控制器中的函数或方法来处理这些问题,以提供模态的模型对象并将其属性绑定到模态视图。

答案 1 :(得分:0)

您可以使用状态容器/状态管理库(例如ngxs)来通过所有应用程序共享数据,而不仅是页面和模式。它更清洁,并使您的信息可在整个应用程序中重复使用,并可以解决您的实际问题