Trying to bind string with data-* in angular 4
尝试以angular4实现滑块。
以下是slider.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | import { Component, OnInit } from '@angular/core'; import { HomeService } from './../services/banner/home.service'; import { apiUrl } from './../services/global.constant'; @Component({ selector: 'app-slider', templateUrl: './slider.component.html', styleUrls: ['./slider.component.css'] }) export class SliderComponent implements OnInit { constructor(private service: HomeService) { } slider: any[]; url=apiUrl; ngOnInit() { \tthis.service.getBanners() .subscribe(slider => { \tif(slider.success==1) \t\tthis.slider = slider.data; \telse \t\talert("Image fetcher was not able to get any slider images."); \t console.log(this.slider)} ); } } |
以下为slider.component.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <ul> <!-- SLIDE 1--> <li *ngFor="let image of slider" data-title="Slide 1" data-index="slide-1" data-thumb="{{url}}{{image.image}}"> <!-- MAIN IMAGE --> <img src="{{url}}{{image.image}}" alt="Slide 1" data-bgposition="center top" data-kenburns="on" data-duration="7000" data-scalestart="100" data-scaleend="110" data-offsetstart="-50 100" data-offsetend="100 -150" data-bgfit="105" data-bgfitend="100" data-bgpositionend="center bottom"> <!-- LAYERS --> <!-- LAYER NR. 1 --> THIS IS FAB! <!-- LAYER NR. 2 --> <!-- LAYER NR. 3 --> <p style="font-size: 21px; line-height: 1.5"> All the latest trends and labels are available. Get ready for Autumn with our latest range of stylish clothing. Free Delivery on all items over $50 </p> <!-- LAYER NR. 4 --> Shop Womens </li> <!-- SLIDE 2--> </ul> |
它为data-thumb属性引发模板解析错误。
Data-thumb attribute comes with the theme to implement the slider.
The following error snippet is thrown at the console.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | Uncaught Error: Template parse errors: Can't bind to 'thumb' since it isn't a known property of 'li'. ("- SLIDE 1--> <li *ngFor="let image of slider" data-title="Slide 1" data-index="slide-1" [ERROR ->]data-thumb="{{url}}{{image.image}}"> <!-- MAIN IMAGE --> "): ng:///AppModule/SliderComponent.html@4:87 at syntaxError (compiler.js:485) at TemplateParser.parse (compiler.js:24668) at JitCompiler._parseTemplate (compiler.js:34621) at JitCompiler._compileTemplate (compiler.js:34596) at eval (compiler.js:34497) at Set.forEach () at JitCompiler._compileComponents (compiler.js:34497) at eval (compiler.js:34367) at Object.then (compiler.js:474) at JitCompiler._compileModuleAndComponents (compiler.js:34366) |
以下是使用该服务获取的json数组。
0: {id: 3, title:"Banner-3", url:"23", image:"resources/assets/images/banner_images/1502370366.banner_3.jpg", type:"category"}
1: {id: 4, title:"Banner-4", url:"17", image:
"resources/assets/images/banner_images/1502370387.banner_4.jpg", type:
"category"}
2: {id: 5, title:"Banner-5", url:"19", image:
"resources/assets/images/banner_images/1502370406.banner_5.jpg", type:
"category"}length: 3__proto__: Array(0)
默认情况下,Angular会进行属性绑定。如果没有这样的属性,则会出现错误。
改为使用显式属性绑定
1 | attr.data-thumb="{{url}}{{image.image}}" |
或
1 | [attr.data-thumb]="url + image.image" |