Связывание свойств с интерполяцией атрибутов

Я прочитал статью о различии между свойствами и привязками атрибутов. Из того, что я понял, большую часть времени Angular2 предпочитает привязки свойств, потому что после каждого изменения данных DOM будет обновляться. (Если я ошибаюсь, пожалуйста, исправьте меня).

У меня есть пользовательский компонент и используйте его из родительского компонента. В нем у меня есть @Input с именем truevalue. когда я инициирую truevalue из родителя с помощью связывания свойств, иногда он не изменяется. Я использовал следующий код:

<my-checkbox [(ngModel)]="chkItems" [disabled]="!editMode" [trueValue]="Y"></my-checkbox>

Если я отправляю true или "1" в truevalue, он работает, но если я отправлю "Y" или "YES", это не сработает. Поэтому я вынужден использовать привязку атрибутов. Я не знаю, в чем проблема.

Я изменил его, на следующее:

<my-checkbox [(ngModel)]="chkItems" [disabled]="!editMode" trueValue="Y"></my-checkbox>

Заранее спасибо

Ответ 1

Связывание свойств, например

[trueValue]="..."

оценивает выражение "..." и присваивает значение

"true" оценивает значение true "Y" неизвестно. В TypeScript нет внутреннего значения Y и никакого свойства в экземпляре класса компонента, который является областью привязки шаблона. В этом случае вы хотели бы

[trueValue]="'Y'"

Обратите внимание на дополнительные кавычки, чтобы сделать строку Y.

Атрибуты равны также назначаются входам

trueValue="Y"

- простой HTML без привязки Angular2, а значения атрибутов всегда являются строками. Поэтому для этого будет назначаться строка Y.

Другим способом является интерполяция строк

trueValue="{{true}}"

присваивает значение "true" (как строку), потому что выражение с {{...}} будет оцениваться и затем преобразовывается в строку перед передачей на вход. Это не может использоваться для привязки других значений, чем строк.

Чтобы явно привязать атрибут вместо свойства, которое вы можете использовать (кроме trueValue="Y", который создает атрибут, но не делает никакой оценки)

[attr.trueValue]="'Y'"

или

attr.trueValue="{{'Y'}}"

Связывание атрибутов полезно, если вы хотите использовать атрибут trueValue для обращения к элементу с помощью селекторов CSS.

Ответ 2

Я понял из следующих предложений

Сначала я немного объясню атрибут html и свойство dom.

Атрибуты определены html, тогда как свойства определены DOM
Атрибуты инициализируют свойства DOM. После завершения инициализации атрибута задание выполнено
Значение свойства может измениться, тогда как значение атрибута не может измениться

Например

 <input id="idInput" type="text" value="xyz" />

В консоли браузера, если мы введем

idInput.getAttribute('value') //attribute value gives xyz

idInput.value  // property value also gives xyz

Если мы изменим текст ввода в текстовом поле на tyz:

idInput.getAttribute('value') // attribute value gives xyz

idInput.value  // property value also gives tyz

Теперь разные виды переплета в угловых

Строковая интерполяция {{name}}

Интерполяция - это специальный синтаксис, который Angular преобразует в привязку свойства
Чтобы объединить строки, мы должны использовать интерполяцию вместо привязки свойства
Чтобы установить для свойства элемента нестроковое значение данных, необходимо связать свойство

Привязка свойства [disabled] = "name"
Здесь [disabled] является свойством DOM. Не найден атрибут disabled в HTML.

Привязка атрибутов attr.colspan ="{{colspanval}}"
Например, если свойство, соответствующее атрибуту, не существует, у colspan нет соответствующего свойства dom, поэтому требуется привязка атрибута.
В консоли colspan = "{{cospanval}}" ошибка, если мы пытаемся использовать colspan = "{{cospanval}}" - привязка свойства

Ответ 3

Технически существует 3 способа привязки свойств.

Интерполяция строк - {{выражение}} - отображает связанное значение из шаблона компонента и преобразует это выражение в строку.
Связывание свойств - [target] = "выражение" - делает то же самое, выставляя значение из компонента в шаблон, но если вы хотите связать выражение, отличное от строки (например, boolean), тогда свойство Binding - лучший вариант.
bind-target = "expression" - это не обычный способ использования.

Всегда ваше решение использовать любой вариант, который подходит для вашего прецедента.

Ответ 4

Предполагая, что my-checkbox - ваш настраиваемый селектор компонентов, и вы используете его в своем родительском компоненте. Поскольку у вас есть свойство trueValue как @Input на вашем настраиваемом компоненте, чтобы использовать его в родительском компоненте Y, необходимо оценить значение value, которое оно делает в случае 1 (эквивалентно true).

Для привязки свойства к работе он должен оценивать значение. "YES" или "Y" - это просто строковое значение, которое не будет оцениваться, если вы не сделаете что-то вроде:

export class ParentComponent` {
       Y = "YES"; // <--or "Y"
    }

а затем отобразите trueValue с помощью interpolation в своем пользовательском компоненте, например {{trueValue}}

еще одна вещь, которую следует отметить, когда вы используете интерполяцию {{}} i.e, она всегда преобразует значение в .toString() перед привязкой.

Ответ 5

При рендеринге значений данных в виде строк нет технической причины предпочитать одну форму другому.

Если нам нужны значения данных как логические или другие, кроме строки, тогда нам нужно перейти на привязку свойств

Ответ 6

Привязка свойств ([]) и интерполяция ({{}}), оба одинаковы, и оба поддерживают одностороннее связывание данных (предоставление данных из компонента в HTML-шаблон). Между ними есть небольшая разница. Мы должны использовать привязку свойства для нестроковых data.such как

<div [disabled]='isdissabled'>Text</div>

 here is property that is defined inside component.

 isdissabled : boolean=true;(after that change it to false in both scenario it would work as expected)
<div disabled='{{isdissabled}}'>Text</div>

but this scenario would not work as expected(both scenario it would be dissabled).