svg - Angular 2 - 将输入表单数据绑定(bind)到 SVG 文本元素

Question

我希望将表单输入字符串绑定(bind)到 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 中绑定(bind) SVG 和输入的方法。

谢谢!

Answer 1

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

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