Bindung von Werten an DOM-Elementeigenschaften in Angular

In Angular werden zwei Arten der Wertbindung an Tags unterschieden: an das Attribut des Tags und an die Eigenschaft des DOM-Elements. In der Regel ist das dasselbe, aber manchmal spielt es eine Rolle.

Schauen wir uns diese beiden Methoden an Beispielen an. Angenommen, wir haben die folgende Klasseneigenschaft:

app/app.component.tsexport class AppComponent {
  public text: string = 'abcde';
}

Lassen Sie uns den Wert dieser Eigenschaft im Text der textarea ausgeben

app/app.component.html<textarea>{{ text }}</textarea>

Und jetzt in das Attribut placeholder:

app/app.component.html<textarea placeholder="{{ text }}"></textarea>

Und jetzt schreiben wir die Daten genau in die Eigenschaft des DOM-Elements. Dafür setzen wir den Attributnamen in eckige Klammern:

app/app.component.html<textarea [value]="text"></textarea>