Angular 2 - 将输入表单数据绑定到 SVG 文本元素答案

【问题标题】：Angular 2 - binding input form data to SVG text elementAngular 2 - 将输入表单数据绑定到 SVG 文本元素
【发布时间】：2016-04-06 07:44:00
【问题描述】：

我希望将表单输入字符串绑定到 Angular 2 模板中的 svg 文本元素。我不确定如何执行此操作，如果有任何帮助，我将不胜感激。

 <svg class="box">
          <rect class="largeFrame" x="40" y="10" rx="10" ry="10"/>
          <text class="name" x ="400" y="40">Name</text>
          <text class="personName" x="400" y="55" [textContent]="personName.value"></text>
       </svg>  
        <form #f="ngForm">
        <div class="input">
            <label for="name">Enter Your Name</label>
            <input  type="text" [(ngModel)]="personName.value" id="name">
        </div>

[textContent] 不工作...谁能给我提示最好的语法？或者建议一种在 Angular 2 中绑定 SVG 和输入的方法。

谢谢！

【问题讨论】：

标签： svg angular

【解决方案1】：

看来我需要使用 [()] 来绑定数据。我还需要给 personName.value 一个初始值。

<text class="personName" x="400" y="55" [(textContent)]="personName.value"></text>

【讨论】：

【解决方案2】：

使用插值绑定，它将为您绑定到textContent 属性
使用safe navigation operator来防范null和undefined，则不需要指定初始值

<text class="personName" x="400" y="55">{{personName?.value}}</text>

【讨论】：