Angular中本地JSON文件中的SVG多边形

时间:2018-12-11 20:44:22

标签: html json angular svg

我正在Angular 7项目中开发风险游戏。 为了创建世界地图,我创建了一个本地JSON文件,该文件在Angular代码中调用。

JSON如下:

["bord", {
    "continent": [
        {
        "land": [
            {
                "naam":["Ukraine"],
                "points": [[
                    [1561,236],
                    [1561,239],

我做了一个BordService,在这里尝试使用HTTPClient在本地访问JSON文件,例如:

import { HttpClient } from '@angular/common/http';
import {Observable} from 'rxjs';
import { Injectable } from '@angular/core';
import { Landen } from '../model/landen';

@Injectable({
    providedIn: 'root'
})

export class BordService {

  constructor(private http: HttpClient) { 

  }

  getJSON(): Observable <Landen> {

       return this.http.get<Landen>('./assets/json/landen.json');
  }

}

我在类似这样的组件中订阅它:

ngOnInit() {
    this.BordService.getJSON().subscribe(data => {
      this.Land = data["Landen"];
    })

在我的HTML中,我要求在JSON中定义的值如下:

<svg>
  <polygon *ngFor="let Land of Landen" 
  id={{Landen.continent }}
  class= {{Landen.naam }}
  points={{ Landen.points }}/>

</svg>

但是我似乎仍然无法在屏幕上显示地图。

我们将不胜感激!

0 个答案:

没有答案