Question

nChModelで入力要素を他の属性とともに作成し、それを別の要素に追加する関数にマップされたonChangeイベントの選択ドロップダウンがあります。

あなた以下

<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を使用した配列にプッシュし、必要なデータをイテレータにバインドしました。