尝试在角度4中用data-*绑定字符串

Question

尝试在angular 4中实现滑块。

下面是Slider.Component.ts

null

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() {
  	this.service.getBanners()
      .subscribe(slider => {
      	if(slider.success==1)
      		this.slider = slider.data;
      	else
      		alert("Image fetcher was not able to get any slider images.");
      	  console.log(this.slider)} 
       );
    
  }

}

null

下面是slider.component.html

null

 <div class="rev_slider_wrapper fullwidthbanner-container">
    <div id="homepage-slider" class="rev_slider" data-version="5.0">
         <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 -->
                <div class="tp-caption tp-resizeme mdl-typography--display-3 mdl-typography--font-thin oxy-color-light" data-x="left" data-hoffset="500" data-y="top" data-voffset="250" data-transform_in="o:0;e:Power4.easeIn;" data-transform_idle="o:1;s:1000;" data-transform_out="o:0;s:500;e:Power4.easeOut;" data-start="1000"> THIS IS FAB! </div>
                                        <!-- LAYER NR. 2 -->
                <div class="tp-caption tp-resizeme" data-x="left" data-y="top" data-hoffset="500" data-voffset="335" data-start="1500" data-transform_in="o:0;e:Power1.easeIn;" data-transform_idle="o:1;s:500;" data-transform_out="o:0;s:500;e:Power4.easeOut;" style="height: 1px; width: 200px;background: #fff;"> </div>
                                        <!-- LAYER NR. 3 -->
                <div class="tp-caption tp-resizeme mdl-typography--title mdl-typography--font-light oxy-color-light" data-x="left" data-y="top" data-hoffset="500" data-voffset="360" data-start="2000" data-transform_in="o:0;e:Power4.easeIn;" data-transform_idle="o:1;s:600;" data-transform_out="o:0;s:600;e:Power1.easeOut;">
                
                    <p style="font-size: 21px; line-height: 1.5"> All the latest trends and labels are available.<br> Get ready for Autumn with our latest range of stylish clothing.<br>
                    <strong>Free Delivery</strong> on all items over $50<br> </p>
                </div>
                                        <!-- LAYER NR. 4 -->
                <div class="tp-caption tp-resizeme tp-caption-mdl-button mdl-button mdl-button--raised mdl-button--colored" data-x="left" data-y="top" data-hoffset="500" data-voffset="480" data-start="3000" data-transform_in="o:0;y:100;" data-transform_idle="x:0;o:1;s:600;" data-transform_out="o:0;s:800;e:Power1.easeOut;">
                <a href="#" style="color: #fff;">Shop Womens</a>
            </div>
            </li>
                                    <!-- SLIDE 2-->
                                   
            </ul>
        </div>
     </div>

null

它抛出data-thumb属性的模板解析错误。

Data-thumb属性随主题一起提供，以实现滑块。在控制台抛出以下错误代码段。

null

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 (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34497)
    at eval (compiler.js:34367)
    at Object.then (compiler.js:474)
    at JitCompiler._compileModuleAndComponents (compiler.js:34366)

null

0：{ID:3,标题：“Banner-3”,URL：“23”,映像：“Resources/Assets/Images/Banner_Images/1502370366.Banner_3.jpg”,类型：“Category”}1：{ID:4,标题：“Banner-4”,URL：“17”,映像：“Resources/Assets/Images/Banner_Images/1502370387.Banner_4.jpg”,类型：“Category”}2：{ID:5,标题：“Banner-5”,URL：“19”,映像：“

Answer 1

Angular默认执行属性绑定。如果没有这样的属性，您将得到一个错误。

改为使用显式属性绑定

attr.data-thumb="{{url}}{{image.image}}"

或

[attr.data-thumb]="url + image.image"