Одностороннее связывание данных в Angular2

Я получил следующий html

<app-grid [columns]="columns" [data]="data" ></app-grid>

Я хочу, чтобы свойства данных и столбцов были неизменными. Сетка должна показывать только это. Но в случаях сортировки или фильтрации данные будут меняться, по крайней мере, на порядок.

Но вот моя проблема. Если я получаю доступ к массиву данных и изменяю одно свойство содержащего объекта. Вот так.

this.data[0].name = "test"

Оригинал изменяется. Но я думал, что данные - это только один способ передачи данных.

Может кто-нибудь указать мне в правильном направлении, на то, почему это происходит и как я могу его опустить. Я пришел из React, где это было бы довольно прямо.

Ответы

Ответ 1

Вы правы, синтаксис [target]=expression - это односторонняя привязка данных, но я думаю, что вы неправильно поняли идею привязки данных в одном направлении.

Односторонняя привязка данных из источника данных к цели представления означает, что значения из представления не передаются обратно компоненту, а любые изменения, сделанные в выражении в компоненте, отражаются в представлении - это одностороннее связывание данных от источника данных до представления, что не означает, что это одностороннее связывание данных.

С другой стороны, вы можете найти одностороннюю привязку данных от цели представления к источнику данных с синтаксисом (target)=expression, который используется для передачи событий обратно в компоненты.

Подробнее о Angular2 привязке данных в документах можно найти здесь: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax.

Ответ 2

  • Если вы используете [ngModel], [value], {{ param }} и т.д., у вас есть односторонняя привязка, модель для просмотра,
  • Если вы используете (ngModelChange), у вас есть односторонняя привязка, просмотр модели,
  • Если вы используете [(ngModel)], у вас есть двусторонняя привязка.

Но вы используете подкомпонент со свойством ввода @Input(), и это танцует вне линии;-) Нотация не выглядит так, как будто она всегда привязана.

<sub-component [prop]="myObj"></sub-component>

Итак, если вы измените myObj в своем субкомпоненте, он будет привязан:

ngOnInit() {
    this.myObj = this.myObj.push(this.newObj);
}

Вы можете работать с локальной копией myObj, чтобы предотвратить привязку.

Если вам требуется обновление от модели, вы можете нажать его с помощью @Output() в качестве события:

<sub-component [prop]="myObj" (update)="myObj = $event"></sub-component>

Ответ 4

Во-первых, вам нужно понять, что означает привязка данных в Angular?

Что такое привязки данных?

"Привязки данных являются выражениями, встроенными в шаблоны, и оцениваются для создания динамического содержимого в документе HTML. Привязки данных обеспечивают связь между элементами HTML в документе HTML и в файлах шаблонов с данными и кодом в приложении". (От Pro Угловая книга)

[цель]: выражение

Квадратные скобки обозначают одностороннюю привязку данных, когда данные передаются от выражения к цели. Односторонние привязки данных только в одном направлении: данные передаются из компонента в файл шаблона html.

{{Выражение}}

Строковая интерполяционная привязка, которая используется для включения результатов выражения в текстовое содержимое элементов хоста.

(target) = "expr"

Круглые скобки обозначают одностороннюю привязку, в которой данные перемещаются от цели к месту назначения, указанному в выражении. Это привязка, используемая для обработки событий.

[(target)] = "expr"

Эта комбинация скобок, известная как banana-in-a-box, указывает на двустороннюю привязку, когда данные передаются в обоих направлениях между целью и пунктом назначения, указанным в выражении.