角度类型错误：类型“字符串”不可分配给类型“字符串 []”答案

【问题标题】：Angular type error: Type 'string' is not assignable to type 'string[]'角度类型错误：类型“字符串”不可分配给类型“字符串 []”
【发布时间】：2019-02-27 18:19:45
【问题描述】：

我对 Angular 很陌生，正在尝试利用 Angular 6 构建一个电子应用程序。

我想要做的是： 1. SupportInformationClass 有几个定义 2. 在组件初始化时，从电子设置中填充定义

supportInformation.ts：

export class SupportInformation  {

    appsSet1: string[];
    //appsSet2: string[];
    //appsSet3: string[];
    //appsSet4: string[];
}

configuration.componenet.ts：

import { SupportInformation } from './supportInformation';
...
...
export class ConfigurationComponent implements OnInit {

    supportInformation: SupportInformation;


    constructor(private childProcessService: ChildProcessService, private electronService: ElectronService) {
        console.log("inside constructor...")
    }

    ngOnInit() {
        console.log("on ngInit...");
        this.getSupportedApps();
    }

    getSupportedApps() {
        if(this.childProcessService.isElectronApp){

            // this.supportInformation.appsSet1 = ["wow"] // this works

            console.log(this.electronService.settings.get('APPS_1')) // this also works
            this.supportInformation.appsSet1 = this.electronService.settings.get('APPS_1'); // this gives an error
        }
    }
}

即使 this.electronService.settings.get('APPS_1') 返回一个字符串元素数组，我也会在此特定行上出现错误。

this.supportInformation.appsSet1 = this.electronService.settings.get('APPS_1');

错误：

Type 'JsonValue' is not assignable to type 'string[]'.
  Type 'string' is not assignable to type 'string[]'.

我的设置文件如下：

{
...
    "APPS_1": ["abc", "def", "ghi", "jkl"],
    "APPS_2": ["mno", "pqr"],
...
}

console.log(this.electronService.settings.get('APPS_1')) 给出：

我无法理解为什么。有人可以给我一些相同的指示吗？

谢谢。

【问题讨论】：

能否请您发布设置数据及其外观
console.log(this.electronService.settings.get('APPS_1')) 的输出？
通常设置是键值对，右侧有文字。如果您已将 json 放入其中，则可能需要对其进行去字符串化。您也可以只解析分隔符（例如用空字符串替换 [ 字符串），然后在 ',' 上拆分字符串。
当然，我的意思是去字符串化 JSON.parse() 。所以你说 var jsonversion = JSON.parse(this.electronService.settings.get('APPS_1'));
不确定但试试 this.supportInformation.appsSet1 = this.electronService.settings.get('APPS_1');

标签： angular typescript electron angular6

【解决方案1】：

JSON.parse 你的响应然后分配。试试这个，我希望它有效。 https://stackblitz.com/edit/angular-mrejs1?file=src/app/app.component.ts

【讨论】：

【解决方案2】：

您需要 JSON.parse 将您的字符串转换为 json 对象：

import { SupportInformation } from './supportInformation';
...
...
export class ConfigurationComponent implements OnInit {

    supportInformation: SupportInformation;


    constructor(private childProcessService: ChildProcessService, private electronService: ElectronService) {
        console.log("inside constructor...")
    }

    ngOnInit() {
        console.log("on ngInit...");
        this.getSupportedApps();
    }

    getSupportedApps() {
        if(this.childProcessService.isElectronApp){

            // this.supportInformation.appsSet1 = ["wow"] // this works

            console.log(this.electronService.settings.get('APPS_1')) // this also works
            this.supportInformation.appsSet1 = JSON.parse(this.electronService.settings.get('APPS_1')); // this gives an error
        }
    }
}

【讨论】：

嗨，杰夫 - 我不明白 JSON.parse() , JSON.stringify() 点。当我执行 console.log(this.electronService.settings.get('APPS_1')) 时，它已经是 JS 数组格式 - 执行 JSON.parse() - 通过 OP 中的屏幕截图会导致进一步的错误。无论哪种方式，我碰巧让它工作并为我自己的问题提出了答案。就在此刻，我正试图弄清楚它为什么起作用。 :)

【解决方案3】：

好的，在@codeSetter -<[string]>this.electronService.settings.get('APPS_1') 留下的线索和官方角度tutorial 的帮助下，以下似乎工作正常。现在唯一的问题是I don't know WHY it works。

下面是实现：

supportInformation.ts：

export class SupportInformation  {
    appsSet1: string[];
}

configuration.componenet.ts：

import { SupportInformation } from './supportInformation';
...
...

export class ConfigurationComponent implements OnInit {

  supportInformation: SupportInformation = {
        appSet1: []
  };
constructor(private childProcessService: ChildProcessService, private electronService: ElectronService) {
        console.log("inside constructor...")
    }

    ngOnInit() {
        console.log("on ngInit...");
        this.getSupportedApps();
    }

    getSupportedApps() {
        if (this.childProcessService.isElectronApp) {
            this.supportInformation.appSet1 = <[string]>this.electronService.settings.get('APPS_1');
        }
        console.log("this prints what I need: ", this.supportInformation);

    }

}

【讨论】：

this.electronService.settings.get('APPS_1');通过这样做，您将该 JSON 类型转换为字符串数组。