Question

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

谢谢！

Answer 1

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

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

Answer 2

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

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

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

2 个答案: