如何在Angular 2應用程序中獲得這個動態div的innerHTML？

<div *ngFor="let field of page.fields"> 
    <div #ce class="infills richtextbox textarea {{field.groupid}}" contentEditable="true" 
     *ngIf="(field.fieldtype=='textarea' && field.isexpandable=='true')" 
     id="{{field.id}}" name="{{field.id}}" 
     [ngStyle]="{'position':'absolute','top':field.y+'px','left':field.x+'px', 
        'font-size':'12px','font-family':'Courier New','height':field.height+'px', 
        'width':field.width+'px','background':'#EEE'}" 
     [(ngModel)]="field.value" title="{{field.description}}" 
     (dblclick)="openFullRTE(field.id)" (focusout)="getHTMLContent()"> 
    </div> 
</div>

在TS部分，如何在Angular 2應用程序中獲得這個動態div的innerHTML？

getHTMLContent() { 
    console.log(this.ce.nativeElement.innerHTML); 
    }

當我寫在第一個div什麼，各自的innerHTML適當安慰。然後，如果我在第二個div中寫入內容，控制檯將被第一個div的數據覆蓋。請建議一種獲取單個字段的HTML內容並單獨進行控制的方法。

來源

2017-04-25 Arun Kannath

<div *ngFor="let field of page.fields; let i=index"> 

    <div #ce class="infills ri... 

     (focusout)="getHTMLContent(i)"

class MyComponent { 
    @ViewChildren('ce') ces:QueryList<ElementRef>; 

    constructor(private elRef:ElementRef) {} 

    getHtmlContent(i) { 
    console.log(this.ces.toArray()[i].nativeElement.innerHTML); 
    } 
}

來源

2017-04-25 09:54:17

這適用於第一個div。我正確地獲得了第一個div的innerHTML。但由於我生成的div可能基於上面的代碼，因此我無法分別獲取每個div的innerHTML。你能幫我嗎？ –

您可以使用'@ViewChildren（'ce'）ces：QueryList ;'查詢元素列表。另見http://stackoverflow.com/questions/32693061/angular-2-typescript-get-hold-of-an-element-in-the-template/35209681#35209681 –

對不起，我沒有正確地得到它。在我的場景中，考慮一個表單，我在生成這個div並根據我得到的JSON文件獲取它們的innerHTML值。使用這個解決方案，我正確地獲得了第一個div的innerHTML（當我安慰它時）。但是當我將數據輸入到動態生成的第二個div並進行控制時，我只能獲得第一個div的值。你能解釋一下如何解決這個問題嗎？ –

如何在Angular 2應用程序中獲得這個動態div的innerHTML？

回答

相關問題