如何在 Typescript 示例中增加 json 值在按钮单击时增加喜欢或不喜欢

Question

如何在 Typescript 示例中增加 json 值在按钮点击时增加喜欢或不喜欢。

movies: any[] = [
   { name: "Fan", likes: 0, dislikes: 0, unseen: 0, fimage: "/images/fan.jpg" },
   { name: "Airlift", likes: 0, dislikes: 0, unseen: 0, fimage: "/images/airlift.jpg" },
   { name: "Wazir", likes: 0, dislikes: 0, unseen: 0, fimage: "/images/wazir.jpg" },
   { name: "Neerja", likes: 0, dislikes: 0, unseen: 0, fimage: "/images/neerja.jpg" },
   { name: "Bajirao mastani", likes: 0, dislikes: 0, unseen: 0, fimage: "/images/bajirao.jpg" }
];

Answer 1

假设您的列表在 HTML 中看起来像这样，您首先需要监听点击事件：

HTML

<div *ngFor="let movie of movies">
    ...
    <div class="like" (click)="onLike(movie)">...</div>
    <div class="dislike" (click)="onDislike(movie)">...</div>
</div>

使用上面显示的模板，您可以遍历 movies 数组中的每个 movie。您还必须将click 事件绑定到喜欢和不喜欢按钮，以了解用户何时单击其中之一。

打字稿

export class MoviesComponent {

    movies: any[] = [
        { name: "Fan", likes: 0, dislikes: 0, unseen: 0, fimage: "/images/fan.jpg" },
        { name: "Airlift", likes: 0, dislikes: 0, unseen: 0, fimage: "/images/airlift.jpg" },
        { name: "Wazir", likes: 0, dislikes: 0, unseen: 0, fimage: "/images/wazir.jpg" },
        { name: "Neerja", likes: 0, dislikes: 0, unseen: 0, fimage: "/images/neerja.jpg" },
        { name: "Bajirao mastani", likes: 0, dislikes: 0, unseen: 0, fimage: "/images/bajirao.jpg" }
    ];

    onLike(movie) {
        // find the movie in the movies array
        const index = this.movies.indexOf(movie);
        // update the movie
        this.movies[index].likes++;
    }

    onDislike(movie) {
        // find the movie in the movies array
        const index = this.movies.indexOf(movie);
        // update the movie
        this.movies[index].dislikes++;
    }

}

当用户单击其中一个按钮时，您只需增加喜欢或不喜欢的次数。 给每部电影一个唯一的 id 以便在数组中更安全地找到它可能是一个好主意。

如果这有帮助，请告诉我！