Question

我想做svg元素属性绑定。我的代码如下。这是我的HTML代码：

   <g transform="translate(0,0)"  [routerLink]="['./malfunctionAdd']" class="pointer_curser">
                <rect x="50" y="10" width="100" height="50" rx="10" ry="10" stroke-width="2" stroke="black"  [attr.fill]="flowChartDatas[0].fill"></rect>
                <text x="100" y="40" font-size="14" fill="black" text-anchor="middle">{{flowChartDatas[0].name}}</text>
                <rect x="120" y="10" width="30" height="15" rx="0" ry="0" stroke-width="2" stroke="black" fill="red"></rect>
                <text x="135" y="23" font-size="12" fill="black" text-anchor="middle">0</text>
   </g>

服务代码如下。

getFlowChart(status?) {
    (!status) && (status = '1');
    let token = this.storageService.getToken('token');
    return this.http.post(
        `${environment.url.management}/workflow`,
        {
            "access_token": token,
            "type": "trouble_workflow_get",
            "data":{
                "status": status
            }
        }
    ).map((res: Response) => {
        let body = res.json();
        if( body.errcode !== '00000') {
            return [];
        }
        return body['datas'];
    })
}

Ts代码如下：

export class MalfunctionBaseComponent implements OnInit {
flowChartDatas = [];                    

constructor(private maintenanceService: MaintenanceService) { }

ngOnInit() {
    this.maintenanceService.getFlowChart().subscribe(res => {
        this.flowChartDatas = res;
    })
}

}

一切似乎都很好而且数据绑定对我有用。但是当我打开F12时出现控制台错误，错误如下。

ERROR TypeError: Cannot read property 'fill' of undefined
at Object.eval [as updateRenderer] (MalfunctionBaseComponent.html:11)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:14727)
at checkAndUpdateView (core.js:13841)
at callViewAction (core.js:14187)
at execComponentViewsAction (core.js:14119)
at checkAndUpdateView (core.js:13842)
at callViewAction (core.js:14187)
at execEmbeddedViewsAction (core.js:14145)
at checkAndUpdateView (core.js:13837)
at callViewAction (core.js:14187)

任何人都可以帮助我吗？如何解决这个问题，我很困惑。 **注意：

我使用[attr.fill] =“flowChartDatas [0] .fill”而不是fill =“{{flowChartDatas [0] .fill}}”。它对我有用。但是控制台仍显示错误
无论我使用什么前缀。 [attr.fill] =“flowChartDatas [0] .fill”对我有用。但仍然控制台无法读取未定义的属性'填充'。这是有线的。**

Answer 1

发生此错误是因为Angular认为rect是HTML标记。并且填写不是HTML标记属性！

试试这个：

<svg:rect ...>

错误类型错误：无法读取未定义的属性“填充”

1 个答案: