javascript - 从 Angular Controller 获取数据并将其显示在 html View 上出现错误

Question

我正在开发一个在线类(class)应用程序，我正在尝试显示类(class)的类(class)详细信息以及 youtube 上的视频讲座。我的 Angular Controller 正在从 node.js Controller 获取类(class)详细信息并将其显示在 html View 上，但它不显示获取 youtube 视频链接。这是因为我将用于存储类(class)视频的 Mongoose 模式从字符串更改为字符串数组。如果我将类(class)视频的 Mongoose 模式保留为字符串，那么我就可以观看视频。

这是 Mongoose 架构，文件名为 course.server.model.js

'use strict';

/**
* Module dependencies
*/
var mongoose = require('mongoose'),
Schema = mongoose.Schema;

/**
* Course Schema
*/
var CourseSchema = new Schema({
created: {
type: Date,
default: Date.now
},
title: {
type: String,
default: '',
trim: true,
required: 'Title cannot be blank'
},
content: {
type: String,
default: '',
trim: true
},
courseLecture: [{
week_number: { type: Number },
lecture_video: [String]
}],
user: {
type: Schema.ObjectId,
ref: 'User'
}
});

mongoose.model('Course', CourseSchema);

在架构中，我将 Lecture_video 作为 String 数组保留在 courseLecture 中。

这是我的 Angular Controller 。 Controller 名称是courses.client.controller.js

(function () {
'use strict';

angular
.module('courses')
.config(function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist([
    'self',
    'https://www.youtube.com/**'
  ]);
})
.controller('CoursesController', CoursesController);

CoursesController.$inject = ['$scope', 'courseResolve', 'Authentication'];

function CoursesController($scope, course, Authentication) {
var vm = this;

vm.course = course;
vm.authentication = Authentication;

$scope.product = {
  name: 'some name',
  description: 'some description',
  media: [{
    src: vm.course.courseLecture.lecture_video
  }]
};

console.log('value of courseLecture: ' + vm.course);

console.log('value of youtube embed lecture is: ' + vm.course.courseLecture.lecture_video);

$scope.getIframeSrc = function(src) {
  return 'https://www.youtube.com/embed/' + src;
};
}
}());

如果我为 vm.course.courseLecture.lecture_video 执行 console.log，那么我会得到未定义的结果。然而，我确实得到了未定义的信息，即使是从 Node.js Controller 也是如此。

这是我的 html View 。文件名:- view-course.client.view.html

<style>
.video-container {
height: 400px;
width: 200px;
}
.thumbnail1 {
height: 450px;
width: 220px;
}
</style>
<section>
<div class="page-header">
<h1 ng-bind="vm.course.title"></h1>
</div>
<small>
<em class="text-muted">
  Posted on
  <span ng-bind="vm.course.created | date:'mediumDate'"></span>
  by
  <span ng-if="vm.course.user" ng-bind="vm.course.user.displayName"></span>
  <span ng-if="!vm.course.user">Deleted User</span>
</em>
</small>
<p class="lead" ng-bind="vm.course.content"></p>
<div ng-repeat="media in product.media">
<div class="thumbnail1" class="col-xs-12 col-sm-9">
  <div class="video-container">
    <iframe ng-src="{{getIframeSrc(media.src)}}" frameborder="5" allowfullscreen></iframe>
  </div>
</div>
</div>
</section>

现在，我可以使用 REST 调用查看类(class)详细信息，只有视频链接不起作用，如果在类(class)架构中的 courseLecture 属性中，如果我将 Lecture_video 从 Lecture_video 更改为:[字符串] 到演讲视频:{类型:字符串}。我可以观看视频。我想将所有视频链接存储在一个数组中一周，以便可以显示所有视频。请帮助我解决我在这里做错的事情。

Answer 1

如果您根据架构获取了数据，那么您的 Angular Controller 可以如下所示在 media 中添加每个视频网址。因为您的 courseLecture 是一个数组，并且在 courseLecture 中 lecture_video 也是一个数组，因此需要作为 media 数组进行迭代，因此需要两个 forEach 或 for 循环。

$scope.product = {
    name: 'some name',
    description: 'some description',
    media: []
  };

  (vm.course.courseLecture).forEach(function(lecture) {
    (lecture.lecture_video).forEach(function(videoUrl) {
      $scope.product.media.push({src: videoUrl});
    });
  });

和 Html

<div ng-repeat="media in product.media">
    <div class="thumbnail1 col-xs-12 col-sm-9" >
      <div class="video-container">
        <iframe ng-src="{{getIframeSrc(media.src)}}" frameborder="5" allowfullscreen></iframe>
      </div>
    </div>
  </div>