Question

我有以下Angular控制器：

app.controller('VideoCtrl', function($scope, $stateParams, $sce) {
$scope.videos = [
    {
        id: 1,
        title: 'Balance Training',
        source: 'http://powersk01.uic-chp.org/balance.mp4'
    },
    {
        id: 2,
        title: 'Pipette Training',
        source: 'http://powersk01.uic-chp.org/pipette.mp4'
    },
    {
        id: 3,
        title: 'Titration Training',
        source: 'http://powersk01.uic-chp.org/titration.mp4'
    }
];

$scope.video = $scope.videos.filter(function(video) {
    return video.id == $stateParams.videoId;
});
});

在视图中，我尝试显示视频标题：

<ion-view view-title="Video">
    <ion-content>
        <h1>{{ video.title }}</h1>
    </ion-content>
</ion-view>

但由于某种原因，video.title未定义。我可以在过滤视频后放置调试点，即使控制台输出对象并显示可用的属性，我也无法引用它们。我尝试过video.title和video["title"]。

但这确实有效：

$scope.video = $scope.videos[0];

知道为什么在我过滤后会发生这种情况？

Answer 1

filter()对象的Array方法返回通过过滤器的所有元素的子数组，而不是单个对象：

[1,2,3,4].filter(function(number) { return number > 2 }) [3, 4]

这就是您调用filter()时返回的值没有您想要的属性的原因。另一方面，find()方法返回传递测试的第一个元素：

[1,2,3,4].find(function(number) { return number > 2 }) 3

使用find()代替filter()，或者使用.filter()[0]获取第一个元素。

过滤数组后，无法引用对象属性？

1 个答案: