类型'string‘不可赋值给类型'number’。在angular7中以生产模式构建应用程序时

Question

我正在开发一个在mode.But开发中运行良好的Angular7应用程序，当我试图创建一个生产版本时，我得到了一个错误，如下所示。

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'.

错误显示的代码如下：

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

尽管我已经使用了一个模型来表示类型

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

完整代码：

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() {
  }

}

有人能帮我指出我哪里错了吗？

Answer 1

@Nidhin Kumar，更改您的类，如下所示

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

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

这种方法将使用string或number作为变量的类型。

更新

更改此

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

喜欢下面的

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

Answer 2

根据我的说法，一种可能的解决方案应该是将url转换为字符串，无论它是什么。

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

可能会帮助你解决这个问题