html - Hur får man innerHTML av denna dynamiska div i min Angular 2-applikation?

<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>

I den delen,

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

När jag skriver något i första div, loggas respektive innerHTML korrekt i konsolen. Sedan, om jag skriver något i andra div, skrivs konsolen över med data från första div. Vänligen föreslå ett sätt att hämta HTML-innehållet för individuella fält och logga dem separat.

Svar #1

Det enklaste sättet:

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

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

Svar #2

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