使用angular 2和typescript的Svg不使用*ngFor进行渲染

我在玩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 {
}

我用过它：

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

---

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

我是angular2的新手，但这对我很有用，也许你必须补充：

• 指令：[NgFor]

• 从'angular2/common'导入{NgFor}
  
  

对不起，我的英语，希望它能帮助你

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>`
       
})

你可以试试这个

定义圆组件

@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元素

---

当用div元素{{circles.radius}替换svg元素时，我可以看到10、20、30写在我的页面上什么角度的版本？您是否调查了生成的DOM？是否未生成任何内容或缺少某些属性？“angular2”：“2.0.0-beta.7”，生成的dom看起来像@GünterZöchbauer谢谢！我会看一看，但我不介意它是否在IE11上不起作用，我尝试了Edge，它很好。我想知道，您是否也从angular2/core导入组件？我不需要为NgFor导入和指定指令来与div一起使用它，我不明白为什么。。。但对于您的示例，它也不起作用…您使用的是typescript吗？@JCorriveau看我的更新，是typescript，是我导入组件。我发布了一张图片。在指令中明确添加

ngFor

已经不再必要了。这是全球可用的

PLATFORM_指令的一部分。@GünterZöchbauer在意识到这一点后感谢您的澄清，不知道因为它在没有NgFor的情况下工作，写下来查找它，并知道为什么没有NgFor它工作。多亏了他的评论，我能很快找到它，谢谢你所做的一切
@Component({
    selector: 'g[circle]',
    templateUrl: './circle.component.html',
    styleUrls: ['./circle.component.scss']
})

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

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

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