Angular 单击“喜欢”按钮时如何更改类和计算喜欢的数量

我使用的是爱奥尼亚3，我想做一个“喜欢”按钮，但当用户点击“喜欢”按钮时，我并没有改变按钮的类别和喜欢的数量

这是typescript代码：

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将有类似于类的黑色，只有在第一次打开页面时，这才行得通

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

// .......
喜欢
{{result？.nbLikes}

---

如果问题是我理解，当用户单击like图标时，结果不会在屏幕上自动更新，需要刷新，然后正如@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.');
        }
    }
  );
}

---

我将此作为一个新答案发布，因为它是一个与旧答案完全不同的解决方案。由于@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.');
        }
    }
  );
}

然后，在模板中，我们可以将其初始化为result，而不是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>

// .......
喜欢
{{result？.nbLikes}

---

我希望这会有所帮助。

正如他所说的@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>

杰米
{{result？.nbLikes}

有什么问题？你说它能用！你到底想实现什么？

（单击）

的函数调用中的

索引

可能应该是

i

@VikhyathMaiya，不，类和类计数只有在用户第一次打开页面加载和显示数据时才能正常工作，但在单击按钮时不会工作like@Arg0n，是的，我会改正的。您有什么解决方案吗？您需要在http请求的成功回调中手动更新该项。这是正确的，这不会太有效，您是否尝试使用[（ngModel）]并将其链接到某种形式的输入？