Question

我有一个选择下拉列表，其onChange事件映射到一个函数，该函数应该使用ngModel和其他属性创建一个输入元素，并将其附加到另一个元素，如下所示：

<select class="form-control" id="addUsers" (change)='addProfession($event.target.value)'> 
    <option *ngFor='let profession of professions' [value]='profession.ProfessionTypeName'>
         {{ profession.ProfessionTypeName }}
     </option>
<div #addUsersProfessionsSelect></div>

您可以在下面找到与选择更改事件绑定的功能：

addProfession(professionName: string) {
    let profession = new Profession(Profession.nameToIdMap[professionName], professionName);
    this.shouldDisplayProfessionsInputs = true;

    let professionInput = `<div>${profession.professionName}
        <input type="text" class="form-control" [id]='${profession.professionName}' name='${profession.professionName}'
          [(ngModel)]="newCampaign.users[${profession.professionTypeId}]"></div>`

    let safeHTML = this.sanitizer.bypassSecurityTrustHtml(professionInput);
    let element = this.renderer.createElement(this.addUsersProfessionsSelect.nativeElement, 'div');
    this.renderer.setElementProperty(element, 'outerHTML', safeHTML);
}

addProfession会创建并附加元素，但它会忽略所有属性。这是添加的输入元素：

<input type="text" class="form-control" [id]="Stylist" placeholder="Stylist"   
               name="Stylist" [(ngmodel)]="newCampaign.users[6]">

请注意小写的属性名称，并忽略[id]属性上的括号。

我喜欢这方面的任何帮助。谢谢！

Answer 1

我没有直接操作DOM，而是将新职业推到了一个数组，在该数组中我使用了* ngFor并将我需要的数据绑定到迭代器。

创建Input元素并使用ngModel

1 个答案: