上传到angular 5 FE时，HTML5视频显示为白色

Question

Have a weird issue right now, I can upload a file to local storage, upload its path to mongodb. Everything working fine and ready to display in the angular front end. For some reason unless I manually close down the code and reopen it the video only shows up as white, even though the path is absolutely correct. Refreshing the page does nothing, video still white. But restarting the application then the video shows. Is anyone able to help me? I can not figure out whats going wrong, so I can't learn, would really apreciate some assistance with this!

---

 import { Component, OnInit, OnChanges } from '@angular/core'; import { HttpClient } from '@angular/common/http' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { title = 'app'; videos = new Array; constructor(private http: HttpClient) { } ngOnInit() { this.getVideos() } getVideos() { this.http.get<any>('/getVideos') .subscribe((data) => { data.forEach(element => { this.videos.push(element) }); }) } } 

 <form action="/upload" method="POST" enctype="multipart/form-data"> <div class="file-field input-field"> <div class="btn grey"> <span>File</span> <input name="myImage" type="file"> </div> <div class="file-path-wrapper"> <input class="file-path validate" type="text"> </div> </div> <button type="submit" (click)="id()" class="btn">Submit</button> </form> <br> <br> <div *ngFor="let video of videos"> <video width="300" controls> <source [src]="video.fileURL" type="video/mp4"> <source [src]="video.fileURL" type="video/ogg"> Your browser does not support HTML5 video. </video><br><br> </div> 

 const express = require('express'); const path = require('path'); const fileUpload = require('express-fileupload'); const mongoose = require('mongoose'); const app = express(); require('./models/Upload'); const Upload = mongoose.model('upload'); // default options app.use(fileUpload()); // set static folder app.use(express.static(__dirname + '/dist')); // Mongoose/MongoDB middleware const db = require('./config/database'); mongoose.Promise = global.Promise; mongoose.connect(db.mongoURI) .then(() => console.log('MongoDB Connected...')) .catch(err => console.log(err)); app.get('/getVideos', (req, res) => { Upload.find() .then((data) => { res.json(data) }) }) app.post('/upload', (req, res) => { if (!req.files) console.log('no files selected') // The name of the input field (ie "sampleFile") is used to retrieve the uploaded file let sampleFile = req.files.myImage; let name = req.files.myImage.name + Date.now(); fileLocation = `../assets/uploads/${name}.mp4`; // Use the mv() method to place the file somewhere on your server sampleFile.mv(`./src/assets/uploads/${name}.mp4`, function (err) { if (err) { console.log('Moving file error ' + err) } else { const newUpload = { fileURL: fileLocation, fileName: name, userID: '0001' } new Upload(newUpload) .save() console.log('file uploaded') res.redirect('back'); } }); }); //catch all routes and send to Angular Router. app.get('*/', (req, res) => { res.sendFile(path.join(__dirname + '/dist/index.html')); }) // Set listening port const port = process.env.PORT || 1337 app.listen(port, () => { console.log(`Server running on ${port}`) }) 

See below console log from google chrome, showing that the path is correct. But the video will not show?

 <div _ngcontent-c0=""> <video _ngcontent-c0="" controls="" width="300"> <source _ngcontent-c0="" type="video/mp4" src="../assets/uploads/Bye fellows.mp41521933023054.mp4"> <source _ngcontent-c0="" type="video/ogg" src="../assets/uploads/Bye fellows.mp41521933023054.mp4"> Your browser does not support HTML5 video. </video><br _ngcontent-c0=""><br _ngcontent-c0=""> </div> <div _ngcontent-c0=""> <video _ngcontent-c0="" controls="" width="300"> <source _ngcontent-c0="" type="video/mp4" src="../assets/uploads/Hello there!.mp41521933225754.mp4"> <source _ngcontent-c0="" type="video/ogg" src="../assets/uploads/Hello there!.mp41521933225754.mp4"> Your browser does not support HTML5 video. </video><br _ngcontent-c0=""><br _ngcontent-c0=""> </div> 

Would really appreciate some help as to why it wont show a video up unless I manually restart the code. The path is right, everything seems to be working normal. Just angular wont display it for some reason.

Thanks all!

Answer 1

Your angular project runs asynchronously. For that reason, you are getting a blank page when the videos have not been retrieved from the database. In order to fix this issue, you should use *ngIf . Below is a change to your current code.

<div *ngIf="videos.length > 0">
 <div *ngFor="let video of videos">

  <video width="300" controls>
      <source [src]="video.fileURL" type="video/mp4">
      <source [src]="video.fileURL" type="video/ogg">
      Your browser does not support HTML5 video.
    </video><br><br>

 </div>
</div>