使用 angular 2 的 Svg 和不使用 *ngFor 渲染的打字稿答案

【问题标题】：Svg using angular 2 and typescript not rendering with *ngFor使用 angular 2 的 Svg 和不使用 *ngFor 渲染的打字稿
【发布时间】：2016-06-17 06:17:29
【问题描述】：

我正在使用 Angular2，使用 typescript 并且有些东西没有像我希望的那样呈现，我不知道我做错了什么。

此代码有效

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}
    ];
}

我正在尝试使用 typescript 来学习本教程 (http://teropa.info/blog/2016/02/28/metabubbles-generative-art-with-angular-2.html#drawing-svg-circles) ...

似乎与AngularJS 2 and SVG <ellipse> elements not rendered重复

没有为每次迭代生成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'
        }
    }
});

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

【问题讨论】：

当用 div 元素
{{circles.radius}}
替换 svg 元素时，我可以看到 10, 20, 30 写成在我的页面上
什么 Angular 版本？您是否调查过生成的 DOM？没有生成任何内容还是缺少某些属性？
"angular2": "2.0.0-beta.7" 生成的 dom 看起来像 w3.org/2000/svg" my- circle="">
@GünterZöchbauer 谢谢！我会看看，但我不介意它在 IE 11 上不起作用，我用 Edge 试过了，没问题。

标签： svg angular

【解决方案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"
  },
  ..//

【讨论】：

我想知道，你也是从 angular2/core 导入组件吗？我不需要导入和指定 NgFor 的指令以将其与 div 一起使用，我不明白为什么......但是以你的例子来说，它也不起作用......
你在使用打字稿吗？
@JCorriveau 看看我的更新，是的打字稿，是的，我导入了组件。我发布了一张图片。
在指令中显式添加ngFor 已经没有必要了。它是全球可用的PLATFORM_DIRECTIVES 的一部分。
@GünterZöchbauer 感谢您在意识到这一点后的澄清，不知道因为它在没有 NgFor 的情况下工作，写下来找到它，并知道为什么它在没有它的情况下工作。感谢他的评论，我可以很快找到它angular.io/docs/js/latest/api/core/PLATFORM_DIRECTIVES-let.html，谢谢你的一切

【解决方案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

【讨论】：