角度类型错误：无法将类型“字符串”分配给类型“字符串[]”

Question

我对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'））给出：

我不明白为什么。有人可以给我一些有关此的指示吗？

谢谢。

Answer 1

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

Answer 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
        }
    }
}

Answer 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);

    }

}