点击按钮

Question

我正在使用Ionic 3并且我想制作类似按钮但是当用户点击按钮时我没有更改按钮类别并更改喜欢的数量。

这是打字稿代码：

getData() {
    this.http.get(Globals.baseUrl + 'articles').map(res => res.json()).subscribe(data => {
        this.results = data;
    });
}

likeClick(url, i) {
this.http.get(url).subscribe(
    data => {
    },
    (err) => {
        if (err) {
            console.log('Client-side error occured.');
        }
    }
  );
}

这是html代码：

如果用户已经喜欢这篇文章，那么 span 将会有蓝色，这与课程不同，如果他没有这样的话， span 会有黑色，就像是class和只有在第一次打开页面时才能正常工作。

<ion-card *ngFor="let result of results.articles; let i = index">
// .......
<ion-row>
    <ion-col>
        <button ion-button color="primary" clear small icon-start
            (click)="likeClick(result?._links.create_like.href, index)">
   <span [ngClass]="{'unlike': result?.userHasLike == true, 'like': result?.userHasLike == false}">Like&nbsp;&nbsp;
                <ion-icon name='thumbs-up'></ion-icon>{{result?.nbLikes }}</span>
        </button>
    </ion-col>
</ion-row>

Answer 1

我将此作为新答案发布，因为它与旧答案完全不同。由于@hous建议重新加载整个数据不能太高效，因此为什么不手动将其设置为结果： -

getData() {
    this.http.get(Globals.baseUrl + 'articles').map(res => res.json()).subscribe(data => {
        this.results = data;
    });
}

//why is i there when it is never used?
likeClick(url, result) {
this.http.get(url).map (data => data.json()).subscribe(
    data => {

         if (result) {
              //the exact syntax I am not sure about, but, I would guess the response should contain some data indicating whether the userHasLike that could be used to initialize the current result
              result.userHasLike = data.userHasLike;
         }
    },
    (err) => {
        if (err) {
            console.log('Client-side error occured.');
        }
    }
  );
}

然后，在模板中，我们可以将其初始化为结果而不是i： -

<ion-card *ngFor="let result of results.articles; let i = index">
// .......
<ion-row>
    <ion-col>
        <button ion-button color="primary" clear small icon-start
            (click)="likeClick(result?._links.create_like.href, result)">
   <span [ngClass]="{'unlike': result?.userHasLike == true, 'like': result?.userHasLike == false}">Like&nbsp;&nbsp;
                <ion-icon name='thumbs-up'></ion-icon>{{result?.nbLikes }}</span>
        </button>
    </ion-col>
</ion-row>

我希望有所帮助。

Answer 2

所以他对@Raef Kandil进行了一些修改：

这是功能：

likeClick(url, index, result) {
    this.http.get(url).subscribe(
        data => {
            if (result.userHasLike == false){
                result.userHasLike = true;
                result.nbLikes++;
            }
            else{
                result.userHasLike = false;
                result.nbLikes--;
            }
        },
        (err) => {
            if (err) {
                console.log('Client-side error occured.');
            }
        }
    );
}

这是按钮：

<button ion-button color="primary" clear small icon-start
     (click)="likeClick(result?._links.create_like.href, i, result)">
     <span [ngClass]="{'unlike': result?.userHasLike == true, 'like': result?.userHasLike == false}">J'aime&nbsp;&nbsp;
     <ion-icon name='thumbs-up'></ion-icon>{{result?.nbLikes }}</span>
            </button>

Answer 3

如果问题是我理解的，当用户点击相似的图标时，结果不会在屏幕上自动更新并且需要刷新，然后如@ArgOn建议的那样，您可能需要更新成功回调的结果。这可行。

getData() {
    this.http.get(Globals.baseUrl + 'articles').map(res => res.json()).subscribe(data => {
        this.results = data;
    });
}

likeClick(url, i) {
this.http.get(url).subscribe(
    data => {
         this.getData();
    },
    (err) => {
        if (err) {
            console.log('Client-side error occured.');
        }
    }
  );
}