添加组合的attrbiute

Question

您好，我刚开始处理我的第一个角度2项目，我的第一个任务是移植现有的andular 1指令。我需要做的是将svg g元素的属性设置为'translate（outerRadius，innerRadius）'，其中outerRadius和innerRadius是我的组件中的变量。这就是我的尝试：

<g [attr.transform]="translate(outerRadius, innerRadius)"></g>

此语法给出了以下错误：

这是我的组件代码：

import {Component, Input, OnInit, ElementRef} from 'angular2/core';
import {NgStyle} from 'angular2/common';

@Component({
    selector: 'donut-chart',
    templateUrl: './app/engager/components/donut-chart.component.html',
    directives: [NgStyle]
})
export class DonutChart implements OnInit {

    public outerRadius: number = 50;
    public innerRadius: number;

    ngOnInit() {
        const defaultRadius: number = 45;

        this.innerRadius = this.innerRadius < this.outerRadius ? this.innerRadius : defaultRadius;

    }
}

我做错了什么？

Answer 1

您可以使用Typescript＆＃39; template string插值：

setSmallIcon

Answer 2

在此标记<g [attr.transform]="translate(outerRadius, innerRadius)"></g>中，translate(outerRadius, innerRadius)由angular解释为表达式。 outerRadius和innerRadius是有效变量，但translate不是。

尝试

<g [attr.transform]="'translate(' + outerRadius + ',' + innerRadius + ')'"></g>

这将呈现为<g transform="translate(50, 45)"></g>