각도 2에서 편집 가능한 div의 콘텐츠에서 [(ngModel)]을 사용하는 방법은?

각도 2에서 편집 가능한 div의 콘텐츠에서 [(ngModel)]을 사용하는 방법은?

저는 다음과 같이 div의 내용 편집 가능한 입력 내용을 양방향으로 바인딩하기 위해 ngModel을 사용하려고 합니다.

<div id="replyiput" class="btn-input"  [(ngModel)]="replyContent"  contenteditable="true" data-text="type..." style="outline: none;"    ></div> 

하지만 작동하지 않고 오류가 발생합니다.

EXCEPTION: No value accessor for '' in [ddd in PostContent@64:141]
app.bundle.js:33898 ORIGINAL EXCEPTION: No value accessor for ''

NgModel바인딩된 요소가 다음 값을 가질 것으로 예상합니다.value재산, 어느 것div없습니다.그래서 당신은 그것을 받는 것입니다.No value accessor오류

를 사용하여 자신의 동등한 속성 및 이벤트 데이터 바인딩을 설정할 수 있습니다.textContent재산(대신)value) 및 그input이벤트:

import { Component } from "angular2/core";

@Component({
    selector: "my-app",
    template: `{{ title }}
        <div contenteditable="true" [textContent]="model" (input)="model = $event.target.textContent"></div>
        <p>{{ model }}</p>`
})
export class AppComponent {
    title = "Angular 2 RC.4";
    model = "some text";
    constructor() {
        console.clear();
    }
}

Plunker

저는 그것이input이벤트는 모든 브라우저에서 지원됩니다.contenteditable대신 키보드 이벤트에 언제든지 바인딩할 수 있습니다.

업데이트된 답변(2017-10-09):

이제 ng-contentedable module을 가지고 있습니다.Angular 폼과 호환됩니다.

구답(2017-05-11):저의 경우 다음과 같은 간단한 작업을 수행할 수 있습니다.

<div
  contenteditable="true"
  (input)="post.postTitle = $event.target.innerText"
  >{{ postTitle }}</div>

어디에post그것은 재산이 있는 물건입니다.postTitle.

처음, 다음ngOnInit()그리고 구함post백엔드에서, 나는 설정했습니다.this.postTitle = post.postTitle내 구성 요소에서.

작동 중인 Plunkr 여기는 http://plnkr.co/edit/j9fDFc, 이지만 아래는 관련 코드입니다.

---

에 바인딩 및 수동 업데이트textContent제게 도움이 되지 않았고, 줄 바꿈(Chrome에서 줄 바꿈 후 입력 커서를 처음으로 이동)을 처리하지 않았지만, https://www.namekdev.net/2016/01/two-way-binding-to-contenteditable-element-in-angular-2/ 의 내용 편집 가능한 모델 지침을 사용하여 작업할 수 있었습니다.

여러 줄의 일반 텍스트를 처리하도록 조정했습니다.\ns, 아닌<br>을 이용하여white-space: pre-wrap사용하도록 업데이트했습니다.keyup대신에blur이 문제에 대한 일부 솔루션은 다음을 사용합니다.inputIE 또는 Edge에서 지원되지 않는 이벤트contenteditable아직 원소

코드는 다음과 같습니다.

지침:

import {Directive, ElementRef, Input, Output, EventEmitter, SimpleChanges} from 'angular2/core';

@Directive({
  selector: '[contenteditableModel]',
  host: {
    '(keyup)': 'onKeyup()'
  }
})
export class ContenteditableModel {
  @Input('contenteditableModel') model: string;
  @Output('contenteditableModelChange') update = new EventEmitter();

  /**
   * By updating this property on keyup, and checking against it during
   * ngOnChanges, we can rule out change events fired by our own onKeyup.
   * Ideally we would not have to check against the whole string on every
   * change, could possibly store a flag during onKeyup and test against that
   * flag in ngOnChanges, but implementation details of Angular change detection
   * cycle might make this not work in some edge cases?
   */
  private lastViewModel: string;

  constructor(private elRef: ElementRef) {
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes['model'] && changes['model'].currentValue !== this.lastViewModel) {
      this.lastViewModel = this.model;
      this.refreshView();
    }
  }

  /** This should probably be debounced. */
  onKeyup() {
    var value = this.elRef.nativeElement.innerText;
    this.lastViewModel = value;
    this.update.emit(value);
  }

  private refreshView() {
    this.elRef.nativeElement.innerText = this.model
  }
}

용도:

import {Component} from 'angular2/core'
import {ContenteditableModel} from './contenteditable-model'

@Component({
  selector: 'my-app',
  providers: [],
  directives: [ContenteditableModel],
  styles: [
    `div {
      white-space: pre-wrap;

      /* just for looks: */
      border: 1px solid coral;
      width: 200px;
      min-height: 100px;
      margin-bottom: 20px;
    }`
  ],
  template: `
    <b>contenteditable:</b>
    <div contenteditable="true" [(contenteditableModel)]="text"></div>

    <b>Output:</b>
    <div>{{text}}</div>

    <b>Input:</b><br>
    <button (click)="text='Success!'">Set model to "Success!"</button>
  `
})
export class App {
  text: string;

  constructor() {
    this.text = "This works\nwith multiple\n\nlines"
  }
}

지금까지 리눅스에서 크롬과 FF에서만 테스트되었습니다.

다음은 @toebek의 답변을 기반으로 한 다른 버전으로, HTML과 붙여넣기도 지원합니다.

import {
  Directive, ElementRef, Input, Output, EventEmitter, SimpleChanges, OnChanges,
  HostListener, Sanitizer, SecurityContext
} from '@angular/core';

@Directive({
  selector: '[contenteditableModel]'
})
export class ContenteditableDirective implements OnChanges {
  /** Model */
  @Input() contenteditableModel: string;
  @Output() contenteditableModelChange?= new EventEmitter();
  /** Allow (sanitized) html */
  @Input() contenteditableHtml?: boolean = false;

  constructor(
    private elRef: ElementRef,
    private sanitizer: Sanitizer
  ) { }

  ngOnChanges(changes: SimpleChanges) {
    if (changes['contenteditableModel']) {
      // On init: if contenteditableModel is empty, read from DOM in case the element has content
      if (changes['contenteditableModel'].isFirstChange() && !this.contenteditableModel) {
        this.onInput(true);
      }
      this.refreshView();
    }
  }

  @HostListener('input') // input event would be sufficient, but isn't supported by IE
  @HostListener('blur')  // additional fallback
  @HostListener('keyup') onInput(trim = false) {
    let value = this.elRef.nativeElement[this.getProperty()];
    if (trim) {
      value = value.replace(/^[\n\s]+/, '');
      value = value.replace(/[\n\s]+$/, '');
    }
    this.contenteditableModelChange.emit(value);
  }

  @HostListener('paste') onPaste() {
    this.onInput();
    if (!this.contenteditableHtml) {
      // For text-only contenteditable, remove pasted HTML.
      // 1 tick wait is required for DOM update
      setTimeout(() => {
        if (this.elRef.nativeElement.innerHTML !== this.elRef.nativeElement.innerText) {
          this.elRef.nativeElement.innerHTML = this.elRef.nativeElement.innerText;
        }
      });
    }
  }

  private refreshView() {
    const newContent = this.sanitize(this.contenteditableModel);
    // Only refresh if content changed to avoid cursor loss
    // (as ngOnChanges can be triggered an additional time by onInput())
    if (newContent !== this.elRef.nativeElement[this.getProperty()]) {
      this.elRef.nativeElement[this.getProperty()] = newContent;
    }
  }

  private getProperty(): string {
    return this.contenteditableHtml ? 'innerHTML' : 'innerText';
  }

  private sanitize(content: string): string {
    return this.contenteditableHtml ? this.sanitizer.sanitize(SecurityContext.HTML, content) : content;
  }
}

지금까지 이 솔루션을 다루었으며 프로젝트에서 다음 솔루션을 사용할 예정입니다.

<div #topicTitle contenteditable="true" [textContent]="model" (input)="model=topicTitle.innerText"></div>

"$event" 항목보다 템플릿 참조 변수를 사용하는 것을 선호합니다.

관련 링크: https://angular.io/guide/user-input#get-user-input-from-a-template-reference-variable

만족할 수 없는, 블러 이벤트와 내부의 도움으로 양방향 바인딩을 달성했습니다.HTML 특성입니다.

.vmdk:

<div placeholder="Write your message.."(blur)="getContent($event.target.innerHTML)" contenteditable [innerHTML]="content"></div>

.ts에서:

getContent(innerText){
  this.content = innerText;
}

다음은 이벤트가 필요 없는 문자열에 바인딩된 경우의 간단한 해결 방법입니다.테이블 셀 안에 텍스트 상자 입력을 넣고 바인딩하면 됩니다.그런 다음 텍스트 상자를 투명 형식으로 지정합니다.

HTML:

<tr *ngFor="let x of tableList">
    <td>
        <input type="text" [(ngModel)]="x.value" [ngModelOptions]="{standalone: true}">
    </td>
</tr>

저는 ts 객체 없이 javascript를 사용하기에 충분했습니다.HTML:

 <div
        id="custom-input"
        placeholder="Schreiben..."
</div>

TS:

• 같이 을 가져옵니다.document.getElementById("custom-input").innerHTML

• 값을 하려면: " " " " "document.getElementById("custom-input").innerHTML = "myValue"

그리고 모든 것이 완벽하게 작동합니다.저는 자동 크기 조정에 문제가 있었기 때문에 이온 이온 텍스트 영역 대신 div를 사용해야 했습니다.이온 텍스트 영역에서는 js로만 자동 크기를 만들 수 있었습니다.지금은 CSS로 자동 사이즈를 만들고 있는데, 더 나은 것 같습니다.

언급URL : https://stackoverflow.com/questions/35378087/how-to-use-ngmodel-on-divs-contenteditable-in-angular2