title: ERROR TypeError: Cannot read property 'fill' of undefined
body: <p>I want to do svg element attribute binding . My code as follows.
  This is my HTML code:</p>
  
  <pre><code>   &lt;g transform="translate(0,0)"  [routerLink]="['./malfunctionAdd']" class="pointer_curser"&gt;
                  &lt;rect x="50" y="10" width="100" height="50" rx="10" ry="10" stroke-width="2" stroke="black"  [attr.fill]="flowChartDatas[0].fill"&gt;&lt;/rect&gt;
                  &lt;text x="100" y="40" font-size="14" fill="black" text-anchor="middle"&gt;{{flowChartDatas[0].name}}&lt;/text&gt;
                  &lt;rect x="120" y="10" width="30" height="15" rx="0" ry="0" stroke-width="2" stroke="black" fill="red"&gt;&lt;/rect&gt;
                  &lt;text x="135" y="23" font-size="12" fill="black" text-anchor="middle"&gt;0&lt;/text&gt;
     &lt;/g&gt;
  </code></pre>
  
  <p>Service code as follows.</p>
  
  <pre><code>getFlowChart(status?) {
      (!status) &amp;&amp; (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) =&gt; {
          let body = res.json();
          if( body.errcode !== '00000') {
              return [];
          }
          return body['datas'];
      })
  }
  </code></pre>
  
  <p>Ts code as follows:</p>
  
  <pre><code>export class MalfunctionBaseComponent implements OnInit {
  flowChartDatas = [];                    
  
  constructor(private maintenanceService: MaintenanceService) { }
  
  ngOnInit() {
      this.maintenanceService.getFlowChart().subscribe(res =&gt; {
          this.flowChartDatas = res;
      })
  }
  </code></pre>
  
  <p>}</p>
  
  <p>Everything seems fine and t<strong>he data bingding is work for me</strong>.But the console error when i open the F12, the error as follows.</p>
  
  <pre><code>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)
  </code></pre>
  
  <p>Anybody can help me? How to solve that problem, i am confuzed.
  **Pay attention:</p>
  
  <p>I use [attr.fill]="flowChartDatas[0].fill" instead of fill="{{flowChartDatas[0].fill}}". It is works for me . However the console still shows error<br>
  whatever I use prefix or not. [attr.fill]="flowChartDatas[0].fill" is work for me . but still console Cannot read property 'fill' of undefined. That is wired.** </p>