最簡單可能的角度旋轉木馬

Question

我正在努力使盡可能簡單的角度旋轉木馬更好地理解角度。我知道我已經問過類似的問題，人們給了我很好的答案，但我提出的問題將幫助我更深入地理解Angular2 +和Typescript，請耐心等待。

到目前爲止，我有：

HTML：

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> 

    <div class="carousel-inner" role="listbox"> 
     <img src="{{ this.showSlide(slides, i) }}" alt="slide" > 
    </div> 

<button ng-click='getPrev(slides, i)'>Prev</button> 

<button ng-click='getNext(slides, i)'>Next</button> 

</div> 

TS：

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-image-slider', 
    templateUrl: './image-slider.component.html', 
    styleUrls: ['./image-slider.component.css'], 

}) 

export class ImageSliderComponent implements OnInit { 

public slides: string [] = ['./assets/SBI_Slide_1.jpg', './assets/Eagle_Slide_2.jpg', './assets/Knot_Slide_3.jpg' ] 
i: number; 

showSlide(slides, i) { 
    let slide = slides[i]; 
    return slide; 
} 

getPrev(slides, i) { 
    i = i - 1; 
    this.showSlide(slides, i) 
} 

getNext(slides, i) { 
    i = i + 1; 
    this.showSlide(slides, i) 
} 



    ngOnInit() { 
    this.i = 0; 
    } 

} 

爲什麼這個不行？是否因爲我需要更新img html元素？我的ng點擊代碼似乎沒有做任何事情！

Answer 1

UPDATE： 我見到你之前發現的方式，我張貼了這個答案。 我會指出一些小錯誤：

ng-click不是一個Angular指令，而是用（點擊）代替;

'this'關鍵字無法從模板訪問，但是該屬性是Angular負責將模板綁定到類的。

您應經常檢查值，遞增/遞減，因爲你可能發生indefined之前（即I值也許<是0或> slides.length）

---

我會做這種方式，但要小心我沒有跑：

HTML

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> 

    <div class="carousel-inner" role="listbox"> 
     <img src="{{ getSlide() }}" alt="slide" > 
    </div> 

<button (click)='getPrev()'>Prev</button> 

<button (click)='getNext()'>Next</button> 

</div> 

打字稿：

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-image-slider', 
    templateUrl: './image-slider.component.html', 
    styleUrls: ['./image-slider.component.css'], 

}) 

export class ImageSliderComponent { 

    slides: string [] = ['./assets/SBI_Slide_1.jpg', './assets/Eagle_Slide_2.jpg', './assets/Knot_Slide_3.jpg' ] 
    i=0; 

    getSlide() { 
     return this.slides[this.i]; 
    } 

    getPrev() { 
     this.i = this.i===0 ? 0 : this.i - 1; 
    } 
//edit here  
    getNext() { 
     this.i = this.i===this.slides.length ? this.i : this.i + 1; 
    } 


} 

Answer 2

好在維加的幫助下（見上） - 我找到了我的問題的答案。

我現在想要了解的是如何擺脫方法中的'this'。

HTML：

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> 

    <div class="carousel-inner" role="listbox"> 
     <img src="{{ showSlide(slides, i) }}" alt="slide" > 
    </div> 

<button (click)="getPrev(slides, i)">Prev</button> 

<button (click)="getNext(slides, i)">Next</button> 

</div> 

TS：

import { Component, OnInit } from '@angular/core'; 
import { ImageServiceService } from '../image-service.service'; 

@Component({ 
    selector: 'app-image-slider', 
    templateUrl: './image-slider.component.html', 
    styleUrls: ['./image-slider.component.css'], 

}) 

export class ImageSliderComponent implements OnInit { 

public slides: string [] = ['./assets/SBI_Slide_1.jpg', './assets/Eagle_Slide_2.jpg', './assets/Knot_Slide_3.jpg' ] 
i: number; 

showSlide(slides, i) { 
    let slide = slides[i]; 
    return slide; 
} 

getPrev(slides, i) { 
    this.i = this.i - 1; 
    this.showSlide(slides, i) 
} 

getNext(slides, i) { 
    this.i = this.i + 1; 
    this.showSlide(slides, i) 
} 



    ngOnInit() { 
    this.i = 1; 
    } 

}