尝试在角度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属性附带实现滑块的主题。 控制台将抛出以下错误代码段。
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)
0：{id：3，title：＆＃34; Banner-3＆＃34;，url：＆＃34; 23＆＃34;，image：＆＃34; resources / assets / images / banner_images / 1502370366。 banner_3.jpg＆＃34;，输入：＆＃34; category＆＃34;} 1：{id：4，title：＆＃34; Banner-4＆＃34;，url：＆＃34; 17＆＃34;，image： ＆＃34; resources / assets / images / banner_images / 1502370387.banner_4.jpg＆＃34;，输入： ＆＃34;类别＆＃34;} 2：{id：5，title：＆＃34; Banner-5＆＃34;，url：＆＃34; 19＆＃34;，image： ＆＃34; resources / assets / images / banner_images / 1502370406.banner_5.jpg＆＃34;，输入： ＆＃34; category＆＃34;} length：3__proto__：Array（0）
答案 0 :(得分：2)
默认情况下，Angular会进行属性绑定。如果没有这样的属性，您将收到错误。
使用显式属性绑定
// 1010(base10) = 0000 0011 1111 0010(base2) -> requires 16 bits
unsigned base2 = 10; // 1010 in base 2
unsigned base10 = 1010; // Assume only 1's and 0's are used
unsigned answer = 0;
int bit = 0;
for (int bit = 0; base10 > 0; bit++)
{
if (base10 % 10) answer |= (0x01 << bit);
base10 /= 10;
}
// At this point answer = 1010(base2)
或
attr.data-thumb="{{url}}{{image.image}}"