关于html:尝试在angular 4中将字符串与data- *绑定

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"