使用Angular 2和TypeScript的SVG无法使用* ngFor渲染

Question

我正在使用打字稿来玩Angular2，但有些东西并没有如我所希望的那样渲染，我不知道自己在做什么错。

该代码有效

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: `
        <svg viewBox="0 0 900 500" preserveAspectRatio="xMidYMid meet">
            <svg:circle cx=50 cy=50 r=10 />
            <svg:circle cx=71 cy=71 r=20 />
            <svg:circle cx=106 cy=106 r=30 />
        </svg>
    `
})
export class AppComponent {
}

但是，当我尝试使用* ngFor将其绑定到对象时，它没有呈现...

@Component({
    selector: 'my-app',
    template: `
        <svg viewBox="0 0 900 500" preserveAspectRatio="xMidYMid meet">
            <svg:circle *ngFor="#circle of circles"
                  [attr.cx]="circle.x"
                  [attr.cy]="circle.y"
                  [attr.r]="circle.radius" />
        </svg>
    `
})
export class AppComponent {
    circles = [
        {x: 50, y: 50, radius: 10},
        {x: 75, y: 75, radius: 20},
        {x: 115, y: 115, radius: 30}
    ];
}

我正在尝试使用打字稿（。）跟随本教程（ http://teropa.info/blog/2016/02/28/metabubbles-generative-art-with-angular-2.html#drawing-svg-circles ）。 。

---

似乎是AngularJS 2和未渲染的SVG <ellipse>元素的重复

没有为每次迭代生成Dom元素，也没有生成属性（属性）...

---

现在，此问题已修复。它可以在Chrome浏览器中使用，但不能在IE 11中使用。IE控制台未显示javascript错误，而chrome控制台却无法显示。 那就是我设法解决我遇到的javascript错误的方法。

我原来是更改SystemJS配置。 代替使用此处所述的以下配置， https://angular.io/docs/ts/latest/quickstart.html#!#tsconfig

System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });

我用它：

System.config({
    transpiler: 'typescript',
    typescriptOptions: {
        emitDecoratorMetadata: true
    },
    map: {
        app: "./app"
    },
    packages: {
        app: {
            main: './main',
            defaultExtension: 'js'
        }
    }
});

这是我不太了解的一部分，这些打字稿选项是否覆盖了tsconfig.json文件？ 我还不知道...我还不知道这个映射是什么，包是什么，但至少我可以继续学习

Answer 1

我是angular2的新手，但这对我有用，也许您必须添加：

• directives:[NgFor]

• import { NgFor } from 'angular2/common';

对不起，我的英语希望对您有所帮助。

import { Component } from 'angular2/core';
import { NgFor } from 'angular2/common
..//
@Component({
    selector: 'test',
    directives:[NgFor],
    template: `
               <svg viewBox="0 0 900 500" preserveAspectRatio="xMidYMid meet">
                    <svg:circle *ngFor="#circle of circles"
                        [attr.cx]="circle.x"
                        [attr.cy]="circle.y"
                        [attr.r]="circle.radius" />
                   </svg>`

})

更新：

我也尝试过

• directives:[NgFor]

• import { NgFor } from 'angular2/common';

  而且有效。

---

package.json信息

..//
"license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.7",
    "systemjs": "0.19.22",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.5.15"
  },
  ..//

Answer 2

你可以试试看

定义你的圆分量

@Component({
    selector: 'g[circle]',
    templateUrl: './circle.component.html',
    styleUrls: ['./circle.component.scss']
})

circle.component.hmtl：

<svg:circle
            [attr.cx]="circle?.x" 
            [attr.cy]="circle?.y" 
            [attr.r]="radius" 

            [attr.fill]="circle?.fill"
             />

和您的根html将像

<svg>
<g circle *ngFor="let circle of circles" 
                    [attr.fill-opacity]="opacity" 
                    [attr.transform]="scale" 
                    [circle]="circle"
                     />
</svg>

同样，您可以使用上面定义的选择器创建相似的组件，从而使用所有其他svg形状。

您可以使用提供所有svg元素的该库

https://www.npmjs.com/package/angular-svg