Ràng buộc giá trị với thuộc tính DOM của phần tử trong Angular

Trong Angular, phân biệt hai loại ràng buộc giá trị với thẻ: vào thuộc tính của thẻ và vào thuộc tính của phần tử DOM. Thông thường, chúng giống nhau, nhưng đôi khi có sự khác biệt.

Hãy cùng xem xét hai cách này qua các ví dụ. Giả sử chúng ta có thuộc tính lớp sau:

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

Hãy hiển thị giá trị của thuộc tính này vào văn bản textarea

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

Và bây giờ vào thuộc tính placeholder:

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

Và bây giờ hãy ghi dữ liệu chính xác vào thuộc tính của phần tử DOM. Để làm điều này, đặt tên thuộc tính trong dấu ngoặc vuông:

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