如何在我的 Angular 2 应用程序中获取此动态 div 的 innerHTML？

Question

<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部分，

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

当我在第一个 div 中写任何东西时，相应的内部 HTML 得到了适当的安慰。然后，如果我在第二个 div 中写入内容，控制台将被第一个 div 的数据覆盖。请建议一种获取 individual 字段的 HTML 内容并分别对其进行控制台处理的方法。

Answer 1

<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);
  }
}

Answer 2

最简单的方法：

<div *ngFor="let field of page.fields"> 
    <div #ce ... (focusout)="getHTMLContent(ce)">
    </div>
</div>

getHTMLContent(element) {
    console.log(element.innerHTML);
}

如何在我的 Angular 2 应用程序中获取此动态 div 的 innerHTML？

How to get innerHTML of this dynamic div in my Angular 2 application?

html

typescript

angular2-forms

angular