ΠΡΠ΅ΠΌ ΠΏΡΠΈΠ²Π΅Ρ:
Π― Ρ
ΠΎΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ jquery_lazyload Π² ΡΠ²ΠΎΠΉ ΠΏΡΠΎΠ΅ΠΊΡ
Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
"ΡΠ³Π»ΠΎΠ²ΠΎΠΉ2": "2.0.0-Π±Π΅ΡΠ°.3",
"jquery-Π»Π΅Π½ΠΈΠ²Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ°": "1.9.7"
html-ΠΊΠΎΠ΄:
<div *ngFor="#page of pages">
<img class="lazy" data-original="http://i-digi-sign.appspot.com{{page}}.jpg" width="595" height="842">
</div>
Π½ΠΎ ΡΡΠΎ ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅:
Error: Template parse errors:
Can't bind to 'original' since it isn't a known native property (""595" height="842" style="margin-top: 10px;">-->
<img class="lazy" [ERROR ->]data-original="http://i-digi-sign.appspot.com{{page}}.jpg" width="595" height="842" style="margin-top"): TemplateEditComponent<strong i="15">@76</strong>:50
at new BaseException (http://127.0.0.1:8888/node_modules/angular2/bundles/angular2.dev.js:7325:21)
at TemplateParser.parse (http://127.0.0.1:8888/node_modules/angular2/bundles/angular2.dev.js:23440:15)
at http://127.0.0.1:8888/node_modules/angular2/bundles/angular2.dev.js:24136:54
at Zone.run (http://127.0.0.1:8888/node_modules/angular2/bundles/angular2-polyfills.js:1243:24)
at Zone.run (http://127.0.0.1:8888/node_modules/angular2/bundles/angular2.dev.js:13408:32)
at zoneBoundFn (http://127.0.0.1:8888/node_modules/angular2/bundles/angular2-polyfills.js:1220:26)
at lib$es6$promise$$internal$$tryCatch (http://127.0.0.1:8888/node_modules/angular2/bundles/angular2-polyfills.js:468:17)
at lib$es6$promise$$internal$$invokeCallback (http://127.0.0.1:8888/node_modules/angular2/bundles/angular2-polyfills.js:480:18)
at lib$es6$promise$$internal$$publish (http://127.0.0.1:8888/node_modules/angular2/bundles/angular2-polyfills.js:451:12)
at http://127.0.0.1:8888/node_modules/angular2/bundles/angular2-polyfills.js:123:10
ΠΡΠ»ΠΈ Ρ ΡΠ΄Π°Π»Ρ "{{page}}" ΠΈΠ· img.data-original, ΠΊΠΎΠ΄ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΠΎΡΠΎΡΠΎ.
ΠΠ°ΠΊ Ρ ΠΌΠΎΠ³Ρ ΡΠΏΡΠ°Π²ΠΈΡΡΡΡ Ρ ΡΡΠΈΠΌ? ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, ΠΏΠΎΠΌΠΎΠ³ΠΈΡΠ΅ ΠΌΠ½Π΅.
<img [attr.data-original]="expr">
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ, ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ ΠΎΡΠΎΡΠΎ.
<img class="lazy" attr.data-original="http://i-digi-sign.appspot.com{{page}}.jpg" width="595" height="842">
...
ΠΡΠ° ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Π±ΡΠ»Π° Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π·Π°Π±Π»ΠΎΠΊΠΈΡΠΎΠ²Π°Π½Π° ΠΈΠ·-Π·Π° Π±Π΅Π·Π΄Π΅ΠΉΡΡΠ²ΠΈΡ.
ΠΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π½ΠΎΠ²ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, Π΅ΡΠ»ΠΈ Π²Ρ ΡΡΠΎΠ»ΠΊΠ½ΡΠ»ΠΈΡΡ Ρ ΠΏΠΎΡ
ΠΎΠΆΠ΅ΠΉ ΠΈΠ»ΠΈ ΡΠ²ΡΠ·Π°Π½Π½ΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ.
Π£Π·Π½Π°ΠΉΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ Π½Π°ΡΠ΅ΠΉ ΠΏΠΎΠ»ΠΈΡΠΈΠΊΠ΅ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ Π±Π»ΠΎΠΊΠΈΡΠΎΠ²ΠΊΠΈ ΡΠ°Π·Π³ΠΎΠ²ΠΎΡΠΎΠ² .
_ΠΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Π±ΡΠ»ΠΎ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΎ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π±ΠΎΡΠΎΠΌ._
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
Π‘ΠΌ.: https://github.com/angular/angular/issues/4438 .