从ts到HTML文件渲染的动态HTML无法正常工作

时间:2018-11-14 08:31:17

标签: angular6

我需要根据.ts文件中的条件形成html标签,并将其与div组件的innerHTML绑定,如下所示:

my.component.ts:

var htmlTag = '';
if (fieldType === 'LOV') {
  htmlTag = '<select type="text" class="form-control" id="' + id + '" name="' + id + '" >' +
    '<option disabled selected>Select</option>';
  for (var i = 0; i < this.entityParameters.length; i++) {
    if (this.entityParameters[i].parameter_name === parameterName) {
      htmlTag = htmlTag + '<option>' + this.entityParameters[i].lov_value + '</option>'
    }
  }
  htmlTag = htmlTag + '</select>';
} else if (fieldType === 'NUMBER') {
  htmlTag = '<input type="number" class="form-control" id="' + id + '" name="' + id + '">';
  console.log(id)
} else if (fieldType === 'DATE')
  htmlTag = '<input type="date" class="form-control" id="' + id + '" name="' + id + '">';
else if (fieldType === 'VARCHAR')
  htmlTag = '<input type="text" class="form-control" id= "' + id + '" name="' + id + '">';

this.parametersHTML = this.parametersHTML +
  '<div class="row">' +
  '<div class="col-sm-1"></div>' +
  '<div class="col-sm-4">' +
  '<label for="' + id + '" style="line-height: 2.2">' + parameterName + '</label>' +
  '</div>' +
  '<div class="col-sm-4">' + htmlTag +
  '</div>' +
  '</div>';
}

注意:这里entityParameters包含我使用Rest API后获得的JSON数据。

my.component.html:

<form #frmParam="ngForm">
    <div class="form-group">
      <div [innerHTML]="parametersHTML | sanitizeHtml" class="jumbotron">
      </div>
    </div>
</form>

在UI中呈现表单后,我试图在.html文件中访问表单字段值{{frmParam.value | JSON }}。 绑定以某种方式不起作用。我也尝试过使用[(ngModel)]进行同样的操作,但是Angular标签没有被渲染。 有人可以帮我吗?

0 个答案:

没有答案