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

Question

尝试在角度 4 中实现滑块。

下面是slider.component.ts

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)} 
       );
    
  }

}

下面是slider.component.html

 <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>

它会为 data-thumb 属性引发模板解析错误。

主题自带Data-thumb属性来实现滑块。 控制台抛出如下错误sn-p。

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)

以下是使用服务获取的 json 数组。

0: {id: 3, title: "Banner-3", url: "23", image: "resources/assets/images/banner_images/1502370366.banner_3.jpg", type: "category"} 1：{id：4，标题：“Banner-4”，网址：“17”，图片： “资源/资产/图像/banner_images/1502370387.banner_4.jpg”，输入： “类别”} 2：{id：5，标题：“Banner-5”，网址：“19”，图片： “资源/资产/图像/banner_images/1502370406.banner_5.jpg”，输入： “类别”}长度：3__proto__：数组（0）

Answer 1

Angular 默认进行属性绑定。如果没有这样的属性，你会得到一个错误。

改用显式属性绑定

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

或

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