使用angular 2和typescript的svg无法使用* ngFor渲染 [英] Svg using angular 2 and typescript not rendering with *ngFor
问题描述
我正在使用打字稿来玩Angular2,并且有些东西没有如我所希望的那样渲染,我不知道我在做什么错.
I'm playing around with Angular2, using typescript and there is something that is not rendering as I hoped for, I don't know what I'm doing wrong.
此代码有效
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将其绑定到对象上时,它没有呈现...
But when I'm trying to bind it on an object with *ngFor, it's not rendering...
@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}
];
}
I'm trying to follow this tutorial (http://teropa.info/blog/2016/02/28/metabubbles-generative-art-with-angular-2.html#drawing-svg-circles) using typescript instead ...
似乎是 AngularJS 2和SVG< ellipse>的副本;元素未呈现
不是每次迭代都生成Dom元素,也不是生成属性(属性)...
Dom elements not generated for every iteration and properties(attributes) not generated...
此问题现已修复 它适用于Chrome,但不适用于IE 11. IE控制台未显示javascript错误,而chrome控制台却未显示.这样一来,我便设法解决了自己遇到的JavaScript错误,从而解决了这个问题.
THIS IS NOW FIXED It works in Chrome, but not in IE 11. IE Console was not displaying the javascript errors and chrome console was. That how I managed to fix my issue trying to solve the javascript errors I had.
我原来是更改SystemJS配置的.而不是使用下面所述的配置 https://angular.io/docs/ts/latest/quickstart.html#!#tsconfig
I turned out to change the SystemJS config. Instead of using the following config as stated there 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文件?我还不知道...我还不知道此映射是针对什么以及包是什么,但是至少我可以继续学习
That's one part I'm not understanding very well, are those typescriptoptions are overrideing tsconfig.json file? I don't know yet... I don't know yet what is this mapping for and what are the packages, but at least I can go on with my learning
推荐答案
我是angular2的新手,但这对我有用,也许您必须添加:
I'm new to angular2 but this works for me, maybe you have to add:
-
directives:[NgFor]
import { NgFor } from 'angular2/common';
对不起,我的英语希望对您有所帮助.
sorry for my English hope it will help you.
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信息
package.json info
..//
"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"
},
..//
这篇关于使用angular 2和typescript的svg无法使用* ngFor渲染的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!