Question

没有更好的方法来构建问题，但是：

我的应用程序中有一个按钮：

<div #displayDiv></div>
<button (click)="genTable()"></button>

组件中的函数调用如下：

@ViewChild('displayDiv') div: ElementRef;
.
.
genTable(): void {
  this.div.nativeElement.innerHTML = ''; // clear the contents of the div
  // Make some API call and get data in JSON format and store it
  // in a private variable of the class called tableResult

  // change content of div using innerHTML
  this.div.nativeElement.innerHTML = `
    <table>
     <tr *ngFor="let eachProp of tableResult">
      <th>{{eachProp}}</th>
     </tr>
    </table>
  `;
}

上面的代码只显示 {{eachProp}} 作为字符串，而不是内容加上它只显示一次。

如何制作*ngFor和Angular模板。在{{eachProp}} div中编写代码时，innerHTML动态可用吗？

更多信息

我已经在displayDiv中呈现了一些图表，一旦用户点击按钮，图表就会被清除，并根据服务器的JSON响应显示一个表格。

JSON响应：

    {"input":{"concept":"HighChair",
     "parameters":["hasHeight","hasWidth"],
      "filters":[{"min":3.0,"max":5.2}]},
      "columns":["hasHeight","hasWidth"],
      "rows":[["106.0","47.0"],["85.0","50.0"]]}

Answer 1

Weapon.find({})........

在组件中，有这样的东西：

<div>
  <table *ngIf="tableResult">
    <tr>
      <th *ngFor="let eachProp of tableResult?.columns">{{eachProp}}</th>
    </tr>
    <tr *ngFor="let row of tableResult?.rows">
      <td *ngFor="let field of row">
        {{field}}
      </td>
    </tr>
  </table>
  <div *ngIf="!tableResult">
     <!-- put your initial diagram here -->
  </div>
</div>
<button (click)="genTable()"></button>

Answer 2

没有办法从你的代码中知道tableResult中的内容，但我怀疑是什么导致了你的错误。建议是尝试在表格标签下面{{tableResult}}。这样你就可以看出它的内容是否正确，是否是一个可以通过* ngFor迭代的数组或集合。

**编辑：正如其他用户指出的那样，您正在尝试将未编译的元素插入DOM。那不会飞。您需要有一个模板并在模板中执行操作。见这里：https://angular.io/guide/architecture#templates

如何识别用HTML编写的Angular 2代码，使用div的innerHTML进行渲染？

更多信息

2 个答案: