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中写入任何内容时，相应的innerHTML可以正常安装。然后如果我在第二个div中写一些东西，控制台会被第一个div的数据覆盖。请建议一种获取单个字段的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？

2 个答案: