ngModel不处理动态注入的HTML

Question

我收到服务器的JSON响应，我正在创建一个HTML字符串并将其附加到DOM。 HTML正确呈现，但唯一的问题是ngModel无法正常运行。

.ts文件中的文本[（ngModel）]在HTML上呈现为[（ngmodel）]。

用于创建HTML字符串并附加到HTML ::

的函数

this.prefill.fetchCustomComponent().subscribe(data => {

  data.forEach(el => {
    this.customComponentObj.component_id = el.component_id;
    this.customComponentObj.component_value = ""
    this.customComponentArr.push(this.customComponentObj);

    let customElement = "";

    /* detect type of input  example Case taken for select*/
    if (el.type == 1) {
      // this is a text input
      customElement += '<div class=\"field-wrapper has-value\"><input type=\"text\" value=\"\" id=\"' + el.component_id + '\" class=\"form-ctrl\" [(ngModel)]=\"\" name=\"' + el + '\" required enquiryInput/><label for=\"' + el.component_id + '\">' + el.label + '</label>';
    }

    else if (el.type == 2) {
      // this is a checkbox
      customElement += '<br><div class=\"field-checkbox-wrapper\"><input type=\"checkbox\" value=\"\" class=\"form-checkbox\" id=\"\"><label for=\"' + el.label + '\">' + el.label + '</label></div>';
    }

    else if (el.type == 3) {
      // this is a select list
      customElement += '<div class=\"field-wrapper has-value\"><select id=\"\" class=\"form-ctrl\" required name=\"\"  [(ngModel)]=\"' + this.temporaryCustomComponentObjStore + '\" (ngModelChange)=\"updateCustomComponent($event)\" enquiryInput><option value=\"\"></option>';

      let customArr = el.prefilled_data.split(",");
      let tempObj = {
        component_id: el.component_id,
        component_value: ""
      };
      //console.log(customArr);
      customArr.forEach(ob => {
        tempObj.component_value = ob;
        console.log(tempObj);
        customElement += '<option value=\"' + tempObj + '\">' + ob + '</option>';
      });
      customElement += '</select><label for=\"\">' + el.label + '</label></div>';
      console.log(customElement);
    }

    else if (el.type == 4) {
      //this is a select multiselect list 
      customElement += '<div class=\"field-wrapper has-value\"><select id=\"\" class=\"form-ctrl\" required name=\"\" multiple enquiryInput><option value=\"\"></option>';
      let customArr = el.prefilled_data.split(",");
      console.log(customArr);
      customArr.forEach(ob => {
        customElement += '<option value=\"' + ob + '\">' + ob + '</option>';
      });
      customElement += '</select><label for=\"\">' + el.label + '</label></div>';
    }

    /* update the HTML DOM */
    document.getElementById('custom-component-section').innerHTML += customElement;
  });
});

HTML组件创建::

<div class="field-wrapper has-value">
<select id="" class="form-ctrl" required="" name="" [(ngmodel)]="[object Object]" (ngmodelchange)="updateCustomComponent($event)" enquiryinput="">
<option value=""></option>
<option value="[object Object]">Academics</option><option value="[object Object]">
Foundation
</option>
<option value="[object Object]">
IIT-JEE
</option>
</select>
<label for="">Scholarship</label>
</div>

提前致谢