Angular 将本地JSON文件映射到键值对数组

通常，人们希望根据用户的选择使用不同的值集。例如，根据所选语言，同一事物的不同表达方式，或根据所选主题，同一类型的不同颜色。我现在正在尝试后一种方法，所以我制作了几个具有相同键但不同值的JSON文件。这是“绿色主题”JSON：

{
  "darker_color": "#1a3300",
  "lighter_color": "#4f9900",
  "error_color": "#b42805"
}

现在我希望组件从注入服务中获取所需的颜色代码，如下所示：

<div [style.color]="themeService.getColorCodeByKey('darker_color')">example</div>

以下是我尝试实现该服务的方式：

@Injectable()
export class ThemeService {
    private readonly RED_SKIN_SOURCE = "assets/themes/red_skin.json"
    private readonly GREEN_SKIN_SOURCE = "assets/themes/green_skin.json" 
    private readonly YELLOW_SKIN_SOURCE = "assets/themes/green_skin.json"
    public skinData: {[key: string]: string} = {};

constructor(private http:Http) {
    this.setSkin(ThemeService.Skin.Green);
}

getColorCodeByKey(key: string): string {
    return this.skinData[key];
}

public setSkin(skin: ThemeService.Skin) {
    let observable: Observable<Response>;
    switch(skin) {
        case ThemeService.Skin.Red: {
            observable =  this.http.get(this.RED_SKIN_SOURCE);
            break;
        }
        case ThemeService.Skin.Yellow: {
            observable =  this.http.get(this.YELLOW_SKIN_SOURCE);
            break;
        }
        case ThemeService.Skin.Green: {
            observable =  this.http.get(this.GREEN_SKIN_SOURCE);
            break;
        }
    }

    observable.map((res: Response) => res.json().forEach(element => {
        this.skinData[element.key] = element;
    }));
  }
}
export namespace ThemeService {
    export enum Skin {
        Red, 
        Green,
        Yellow
    }
}

但是，似乎setSkin方法将skinData保留为空？如何正确地做到这一点？我是否过早地映射了可观察的对象？或者这不是.json的工作方式

---

或者，如果您对如何实现类似键值的服务有更好的想法，我并不反对放弃JSON。。我甚至想用我自己的格式和解析器以我自己的方式实现它

来修复您需要订阅observable的当前解决方案：

observable.subscribe((res: any) => { this.skinData = res; });

---

Angular中的HttpClient通过DefaultFetch解析对json的响应，并将返回您解析的skinData，您可以立即使用它。

要修复当前解决方案，您需要订阅observable：

observable.subscribe((res: any) => { this.skinData = res; });

---

Angular中的HttpClient通过DefaultFetch解析对json的响应与fetch不同，它会返回解析后的skinData，您可以立即使用。

我喜欢您用json存储数据的方式，但不必为不同的颜色创建不同的json文件，您只需创建一个公共文件，它将易于维护

例如：

"green" : {
  "darker_color": "#1a3300",
  "lighter_color": "#4f9900",
  "error_color": "#b42805"
},
"yellow" : {
  "darker_color": "#1a3300",
  "lighter_color": "#4f9900",
  "error_color": "#b42805"
},
"red": {
  "darker_color": "#1a3300",
  "lighter_color": "#4f9900",
  "error_color": "#b42805"
}

所以当您试图从服务中的json文件获取数据时，您可以这样做

 const COLOR_SOURCE_PATH = 'assets/YOUR_FILE_PATH';
 public setSkin(skin: ThemeService.Skin) {
       let observable: Observable<Response>;   
       this._httpClient.get(this.COLOR_SOURCE_PATH)
        .subscribe((res: Response) => {
            this.skinData = res[skin];
        }));
      }
   }



 export namespace ThemeService {
    export enum Skin {
        red, 
        green,
        yellow
    }
}

---

我喜欢你用json存储数据的方式，但是你不需要为不同的颜色创建不同的json文件，你只需要创建一个通用的文件，它将很容易维护

例如：

"green" : {
  "darker_color": "#1a3300",
  "lighter_color": "#4f9900",
  "error_color": "#b42805"
},
"yellow" : {
  "darker_color": "#1a3300",
  "lighter_color": "#4f9900",
  "error_color": "#b42805"
},
"red": {
  "darker_color": "#1a3300",
  "lighter_color": "#4f9900",
  "error_color": "#b42805"
}

所以当您试图从服务中的json文件获取数据时，您可以这样做

 const COLOR_SOURCE_PATH = 'assets/YOUR_FILE_PATH';
 public setSkin(skin: ThemeService.Skin) {
       let observable: Observable<Response>;   
       this._httpClient.get(this.COLOR_SOURCE_PATH)
        .subscribe((res: Response) => {
            this.skinData = res[skin];
        }));
      }
   }



 export namespace ThemeService {
    export enum Skin {
        red, 
        green,
        yellow
    }
}

---

如果您只是将json文件本地存储在源文件中，为什么要为这些设置创建json文件？创建一个ts文件并在其中实例化它们不是更容易吗？你也可以硬编码，我认为json文件是一种很好的方法。更重要的是，我想让用户自己制作皮肤，上传到数据库，然后作为JSON文件发送到前端，所以“local”实际上是一个糟糕的关键字。如果我真的只想使用本地文件，那么ts文件将是一个选项。请尝试将res和res.json打印到控制台中，看看会得到什么？看起来res.json.forEach可能无法工作，因为它不返回可枚举对象。如果您只是将这些设置本地存储在源文件中，为什么要为这些设置创建json文件？创建一个ts文件并在其中实例化它们不是更容易吗？你也可以硬编码，我认为json文件是一种很好的方法。更重要的是，我想让用户自己制作皮肤，上传到数据库，然后作为JSON文件发送到前端，所以“local”实际上是一个糟糕的关键字。如果我真的只想使用本地文件，那么ts文件将是一个选项。请尝试将res和res.json打印到控制台中，看看会得到什么？看起来res.json.forEach可能无法工作，因为它不返回可枚举对象。非常感谢。这实际上解决了问题。。除了它需要是skinData=res.json，除了res。悬赏给youThanks很多。这实际上解决了问题。。除了它需要是skinData=res.json，除了res。赏金归你