Привязка классов Angular 2
Я очень новичок в этом и пытаюсь понять вещи из приведенного ниже кода шаблона Angular 2.
<label for=”productNameInput”>Product Name</label>
<input type=”text”
id=”productNameInput”
placeholder=”Product Name”
[ formControl]=”myForm. get ( ’productName ’)”
[ (ngModel) ] = ”productName”>
У меня 2 вопроса:
- Какие атрибуты следует определять в соответствующем классе?
- Для чего используются фигурные скобки вокруг ngModel?
Большое спасибо!
Прочитать Синтаксис привязки
Ответы 3
- [(ngModel)]
The [(x)] syntax combines the brackets of property binding, [x], with the parentheses of event binding, (x).
Это двухсторонняя привязка данных в Angular. Означает, вносите ли вы изменения на стороне контроллера или на стороне просмотра, это изменит их значение в angular.
Вы также можете разделить его на связывание attribute и связывание event. как это -
[ngModel] для привязки атрибутов и (ngModelChange) для привязки событий
Для получения дополнительной информации о двусторонней привязке данных вы можете обратиться к официальной документации здесь -
Which attributes should be defined in corresponding class?
productName здесь, в вашем коде, - это переменная, которую вам нужно определить в классе, чтобы привязать значение к части просмотра.
В логике компонента вы должны определить
myForm: FormGroup;
productName: string;
constructor(private formBuilder: FormBuilder) {
this.myForm = this.formBuilder.group({ productName: '' });
}
Вы должны так определить это из-за того, как код (плохо) написан, но вы можете его сильно упростить.
Фигурные скобки (и круглые скобки) вокруг ngModel относятся к привязке данных Angular:
[x]означает, что вы Вход значение для фреймворка(x)означает, что фреймворк выходы имеет для вас значение[(x)]- это двусторонняя привязка: вы можете обновить представление, введя значение, и переменная вашего компонента обновляется, когда значение выводится.
Кстати, formControl и ngModel - дубликаты, вам следует удалить любой из них.
фигурные скобки вокруг ngModel указывают на двухстороннюю привязку. Здесь ссылка для получения дополнительной информации
https://blog.othingtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html
Не уверен, к какому классу вы относитесь