从本地嵌套 Json 文件获取 textNames 和 colorNames

Question

所以我有这些 data.json 我想在其中获取数据以在我的 html 中显示

这是我的组件

tooltip: any;
tooltipColor: any;

ngOnInit() {
this.DataFactory.getLimitedData(this.widgetData).subscribe(data => {
        this.tooltip = data //this should hold the textNames from json file
        this.tooltipColor = data //this should hold the colorNames from json file
        console.log("this is tooltip --------", this.tooltip);
        console.log("this is tooltip color --------", this.tooltipColor);
    });
}

这是 HTML

<div class="tooltip">
    <span *ngIf="showHoverWidget" class="tooltiptext">
      <div class="textContainer">
        <span *ngFor="let colors of tooltipColor" class="textColor">
//this is where i want to display the colors from tooltip color in json file
          <p class="red">{{colors.color1}}</p>
          <p class="amber">{{colors.color2}}</p>
          <p class="green">{{colors.color3}}</p>
        </span>
        <span class="textParagraph">
//this is where i want to display the text from textNames color in json file
          <p *ngFor="let text of textNames">{{ text }}</p>
        </span>
      </div>
    </span>
  </div>
  

我想要获取的JSON文件数据

{
  "count": [
    {
      "clickable": [
        {
          "tooltip": {
            "type": "rag",
            "textNames": [
              "> or = to 1.5 million",
              "> or = to 1 million, < 1.5 million",
              "< 1 million"
            ],
            "colorNames": [
              {
                "color1": "RED",
                "color2": "AMBER",
                "color3": "GREEN"
              }
            ]
          }
        }
      ]
    }
  ]
}

数据工厂.service.ts

getLimitedData(widgetData) {
    return this.http.get(this.base_url + '/widgets_data/data.json'); //json
    return this.http.post(this.base_url_server + 'getWidgetData', widgetData, this.httpOptions);
  }

确实很难弄清楚，所以控制台日志中是我在组件中调用的

console.log("this is tooltip --------", this.tooltip);

内部内容的细分。我如何获取 json 文件的数据？预先感谢！

Answer 1

您可以通过将

JSON

文件放入项目中的

assets

文件夹中来使用它们，一旦您提供应用程序，

assets

文件夹中的所有文件都会公开提供。

然后在您的服务中，您可以使用

JSON

从

HttpClient

检索信息，如下所示：

getLimitedData(widgetData) {
  return this.http.get(this.base_url + '/assets/data.json');
} 

PS：您不能像在

data-factory.service.ts

中那样返回函数的两个值，因为您可以使用rxjs运算符（如combineLatest）来一次从多个Observables中检索值。