Javascript 角度-组件中的函数在ng repeat中不能正常工作

我正在开发一个简单的应用程序，可以对书籍进行评分。有一次我尝试将函数插入到组件内部的控制器时遇到了这个问题。该函数应增加“likes”数，并在段落中用类“likes”显示。但是，当我添加ng click函数时，它似乎在更改前一个元素的值（例如，当我在元素1上单击“likes”时，元素0中的likes计数器会更改）。你能看一下并提出可能的问题吗

   ng-click="$ctrl.plusOne($index)"

以下是组件：

angular.
module('booksList').
component('booksList', {
    templateUrl: 'books-list/books-list.template.html',
    controller: function BooksListController() {
        this.products = [
            {
                name: 'The Book of Trees',
                price: 19,
                pubdate: new Date('2009', '03', '08'),
                cover: 'https://images-na.ssl-images-amazon.com/images/I/61EQH6%2BCpuL._SX376_BO1,204,203,200_.jpg',
                likes: 0,
                dislikes: 0
            },
            {
                name: 'Program or be Programmed',
                price: 8,
                pubdate: new Date('2013', '08', '01'),
                cover: 'https://images-na.ssl-images-amazon.com/images/I/41dKoLBVToL._SX362_BO1,204,203,200_.jpg',
                likes: 0,
                dislikes: 0
            },
            {
                name: 'Sacred Games',
                price: 40,
                pubdate: new Date('2011', '09', '02'),
                cover: 'https://images-na.ssl-images-amazon.com/images/I/51MQoLSldhL._SX327_BO1,204,203,200_.jpg',
                likes: 0,
                dislikes: 0
            },
            {
                name: 'Shantaram',
                price: 20,
                pubdate: new Date('2010', '08', '02'),
                cover: 'https://images-na.ssl-images-amazon.com/images/I/51GEFhAifOL._SX332_BO1,204,203,200_.jpg',
                likes: 0,
                dislikes: 0

            }
        ];        
        this.orderProp = 'name';        
        this.plusOne = function(index) {            
            this.products[index].likes += 1;
            console.log(this.products[index].likes);            
        }
    }
});

   ng-click="$ctrl.plusOne($index)"

下面是我使用函数的html模板：

<div ng-repeat="product in $ctrl.products | filter:$ctrl.query | orderBy:$ctrl.orderProp">
    <div class="thumbnail">
        <img ng-src="{{product.cover}}" alt="{{product.name}}">
        <p class="title">{{ product.name }}</p>
        <p class="price">{{ product.price | currency }}</p>
        <p class="date">{{ product.pubdate | date }}</p>
        <div class="rating">
            <p class="likes" ng-click="$ctrl.plusOne($index)">+{{product.likes}}</p>
            <p class="dislikes" ng-click="$ctrl.minusOne()">-{{product.dislikes}}</p>            
        </div>
    </div>
</div>

   ng-click="$ctrl.plusOne($index)"

{{product.name}
   ng-click="$ctrl.plusOne($index)"

{{product.price | currency}
   ng-click="$ctrl.plusOne($index)"

{{product.pubdate | date}
   ng-click="$ctrl.plusOne($index)"

+{{product.likes}
   ng-click="$ctrl.plusOne($index)"

-{{product.dislikes}}
   ng-click="$ctrl.plusOne($index)"

而不是索引

   ng-click="$ctrl.plusOne($index)"

传递产品本身

   ng-click="$ctrl.plusOne($index)"

   ng-click="$ctrl.plusOne(product)"

并将函数重写如下

   ng-click="$ctrl.plusOne($index)"

    this.plusOne = function(product) {            
        product.likes += 1;
        }

---

您似乎忘记了按$index包含

跟踪

   ng-click="$ctrl.plusOne($index)"

track by$index

用于将数据与

ng repeat

生成的DOM（主要是重新生成）链接起来

   ng-click="$ctrl.plusOne($index)"

在您的情况下，

$index

是一个

标识

键，用于区分

数组中的
项

   ng-click="$ctrl.plusOne($index)"

如果没有唯一标识符，
按$index跟踪也可以提高性能。

   ng-click="$ctrl.plusOne($index)"

这是。
你能不能用一个小玩意儿/小提琴来重新创建它，因为目前我看不出有什么问题……而是把产品传进来。它更简单，也不容易混淆。渲染数组时，您正在对数组进行过滤和重新排序，这意味着
$index
与
产品中对象的索引不同。谢谢！这很有效。你能解释一下为什么它没有正确地引用索引吗？我检查了这些项目是否有适当的索引，所以这对我来说相当混乱me@Joanna，请看一下我的答案。@joanna我认为是过滤造成了这个问题。您可以参考“$index”的工作原理，我想这并不是我的问题所在，因为当我只有一个控制器时，它工作得很好（当我参考您的示例中的$scope时）。但是，当我将控制器放入组件中，然后在站点中仅使用组件内容（带有html模板）时，索引没有正确更改。我认为这个问题可能是由过滤和重新排序引起的，正如提图斯所建议的。是的，这就是问题所在。另一种解决方案是为每个产品分配
id
属性。
   ng-click="$ctrl.plusOne($index)"