“字符串”类型不可分配给“数字”类型。 在angular7中以生产模式构建应用程序时

Question

I am working on an Angular7 application which works fine in developement mode.But when i try to create a production version i am getting an error as like this.

error TS2322: Type 'string' is not assignable to type 'number'.
src/app/video/video.component.ts(56,35): error TS2339: Property 'videoUrl' does not exist on type 'number | VideoName | (() => string) | { (...items: ConcatArray<VideoName>[]): VideoName[]; (...items: (VideoName | ConcatArray<VideoName>)[]): VideoName[]; } | ((searchElement: VideoName, fromIndex?: number) => number) | ... 25 more ... | (() => IterableIterator<...>)'.
  Property 'videoUrl' does not exist on type 'number'.

The code which the error show is here:

 Object.keys(this.quality).map((key) => {
    this.departments.push({id: key, name: this.quality[key].name, videoUrl: this.quality[key].url});
  });

Though i have used an model for type

export class VideoName {
id: number;
name?: string;
videoUrl?: string;
}

Full Code:

import { Component, OnInit, SimpleChanges, ElementRef, ViewChild } from '@angular/core';
import {ActivatedRoute} from "@angular/router";
import { VideoName } from './model';
import { find } from 'lodash';



@Component({
  selector: 'app-video',
  templateUrl: './video.component.html',
  styleUrls: ['./video.component.scss']
})
export class VideoComponent implements OnInit {

  @ViewChild('videoPlayer') videoplayer: ElementRef;

  departments?: VideoName[] = [];

  public videoPath: string;
  public title: string;
  public plot: string;
  public englishTitle: string;
  public tamilTitle: string;
  public posterImage: string;
  public quality: string;

  constructor(private route: ActivatedRoute, private elRef: ElementRef) {
    this.route.queryParams.subscribe(params => {
      console.log('params is', params);
      this.videoPath = params["url"];
      this.title = params["title"];
      this.plot = params["plot"];
      this.englishTitle = params["subtitles_en"];
      this.tamilTitle = params["subtitles_ta"];
      this.posterImage = params["poster"];
      this.quality = JSON.parse(params["quality"]);
      Object.keys(this.quality).map((key) => {
        this.departments.push({id: key, name: this.quality[key].name, videoUrl: this.quality[key].url});
      });
    });

  }

  changedata($event){
    let id = $event.target.value;
    let selectedData = find(this.departments, {id: id});
    this.videoPath = selectedData.videoUrl;
    this.videoplayer.nativeElement.load();
    this.videoplayer.nativeElement.play();
  }

  ngOnInit() {
  }

}

Can anyone help me where i am wrong.

Answer 1

@Nidhin Kumar, change your class something like below,

export class VideoName {
    id: number;
    name?: string | number;
    videoUrl?: string | number;

    constructor(id,name,videoUrl){
      this.id=id;
      this.name=name;
      this.videoUrl= videoUrl;
    }
}

this approach will take both string or number as type of the variable.

UPDATE

change this

this.departments.push({id: key, name: this.quality[key].name, videoUrl: this.quality[key].url});

like below

this.departments.push(new VideoName(key,this.quality[key].name,this.quality[key].url));

Answer 2

A possible solution according to me should be convertin url to string whatever it may be so

this.departments.push({id: key, name: this.quality[key].name, videoUrl: this.quality[key].url+''});

Might help you fix the issue