角度表，使用innerHTML打印单元格值，但值不可点击

Question

下面的函数返回我的表的数据，我想将其视为每当我将表列名称设置为 ColName 且其单元格值将是一个字符串数组（每当数组具有值 UserInfo 时） 我们需要将此值作为标签或超链接，并在用户单击它时调用函数， getUserData(element.id) 和其他字符串值将正常打印为文本。目前我正在使用下面的代码，它允许我打印绝对正确的值 UserInfo 也作为具有单击功能的超链接出现，但单击它时根本不调用 getUserData 函数。我正在使用innerHTML 来打印表中该特定列的值。

打字稿

getUserData(colName: string, element: any): SafeHtml {
    this.ColFieldNames = TableConstants.AllColNames;
    let columnName = Object.keys(this.ColFieldNames).find(
      (key) => this.ColFieldNames[key] === colName
    );

    if(colName == 'MyCol Info' && (element?.['myInfo']?.includes("UserInfo"))){
      const parts = JSON.stringify(element?.['myInfo'])?.split('UserInfo');
    const formattedNames = parts.map((name:any, index:any) => {
      return index === parts.length - 1
        ? `<a class="info-link" (click)="getUserInformation(${element.id})">UserInfo</a>${name}`
        : name;
    });
    const formattedString = formattedNames.join('');
    return this.sanitizer.bypassSecurityTrustHtml(formattedString);
    }else{
    return element[columnName!];
    }
  }

HTML

<td class="table-data" mat-cell *matCellDef="let element">
   <span [innerHTML]="getUserData(col,element)" *ngIf="col == 'ColName' && (tableData.componentName && normalTables(tableData.componentName,col,'normal'))"> </span>

  <span id="normalCols{{i}}" *ngIf="col != 'ColName' && (tableData.componentName && 
   normalTables(tableData.componentName,col,'normal'))">  
{{getUserData(col,element) ? getUserData(x,element) : 'N/A'}} 
  </span>
</td>
        
            

我能够将 UserInfo 作为锚标记打印（检查屏幕截图），但它不会在单击时调用该函数。

Answer 1

innerHTML

内部生成的代码不在角度变化检测范围内，因此任何角度代码都不起作用！

解决方案： 使用

ngFor

/

ngIf

/

(click)

将您创建的函数转换为在 html 中渲染，这将确保在渲染内容时事件正常工作！

如果生成的内容中有角度代码，则不需要

innerHTML

！