Question

我试图找到向生成的表元素及其子元素添加一些指令和事件的最佳方法。

我正在以编程方式在typescript中创建一个表

document.createElement('table')

然后我添加tHead等等...... 在<tr>我想要添加(click)="doSomething()"的原因显而易见。

我必须使用EventListeners还是有不同/更好的方法？我还需要在一些事情上添加* ngIf。不确定如何去做。

感谢任何指点我的建议！

修改对不起我的描述性问题。下面是我的表创建功能。它使用递归。这就是我没有使用标记的原因。除非有一种简单的方法来使用指令进行递归。

    buildTable(tableData: any, properties: string[], tableId: string, tableClass: string): HTMLTableElement {
    let table = document.createElement('table');

    // setting attribute and class if they are passed in
    if (tableId) {
      table.setAttribute('id', tableId);
    }

    if (tableClass) {
      table.classList.add(tableClass);
    }

    // create table header with reference
    let tHeader = table.createTHead();

    // Create the header row with reference
    let headerRow = tHeader.insertRow(0);
    headerRow.classList.add('table-header');

    // Fill header with data
    for (let x = 0; x < properties.length; x++) {
      let th = document.createElement('th');
      th.innerHTML = properties[x];
      headerRow.appendChild(th);
    }

    // create table body with reference
    let tBody = table.createTBody();

    // dictionary for properties with nested data
    let subData: { [key: string]: any; };

    for (let x = 0; x < tableData.length; x++) {
      subData = {}; // clear nested data

      let row = tBody.insertRow();
      row.classList.add('table-row');

      let rowData = tableData[x];

      properties.forEach(prop => {
        let cell = row.insertCell();

        // Does this property have nested data?
        if (Array.isArray(rowData[prop])) {
          cell.innerHTML = prop;
          subData[prop] = rowData[prop];

          // build the sub table row, cell, and child table
          Object.keys(subData).forEach(key => {
            // sub table row
            let subRow = tBody.insertRow();
            subRow.classList.add('sub-content');

            // sub row that holds the table
            let subCell = subRow.insertCell();
            subCell.setAttribute('colspan', properties.length.toString());
            subCell.appendChild(this.buildTable(subData[key], Object.keys(subData[key][0]), null, 'sub-table'));
          });
        }
        else {
          cell.innerHTML = rowData[prop];
        }
      });
    }

    return table;
  }

这会按预期创建表格。我现在需要添加事件来显示/隐藏子表并单击行以选择要编辑/删除的数据/等等。这通常是(click)="doSomething()"

Answer 1

使用简单的 * ngIf 指令轻松组合数据模型：

   class TableData {
  isVisible: boolean = false;
  rows: Item[] = [];
  columns: Item[] = [];

  constructor(rows?: number, cols?: number) {
    if (rows) {
      for (let i = 0; i < rows; i++) {
        this.addRow(i.toString());
      }
    }

    if (cols) {
      for (let i = 0; i < cols; i++) {
        this.addCol(i.toString());
      }
    }
  }

  addRow(rowTitle: string) {
    let row: Item = {
      id: this.rows.length,
      title: rowTitle
    }

    this.rows.push(row);
  }

  addCol(colTitle: string) {
    let col: Item = {
      id: this.columns.length,
      title: colTitle
    }

    this.columns.push(col);
  }
}

模板：

   <table *ngIf="tableView.isVisible" border="1">
    <thead>
        <tr>
            <td *ngFor="let col of tableView.columns">
                {{col.title}}
            </td>
        </tr>

    </thead>
    <tbody>
        <tr *ngFor="let row of tableView.rows" (click)="doSomething(row)">
            <td *ngFor="let col of tableView.columns">
                Cell
            </td>
        </tr>
    </tbody>
</table>

Code example(Updated)

如何在Angular中为生成的元素添加指令

1 个答案: