Включите двухстороннее связывание данных при динамическом добавлении их в шаблон (используя innerHtml) Angular 4 +

Question

Я пытаюсь отредактировать текст из одного из текстовых полей svg с помощью ввода, используя двухсторонний синтаксис привязки данных Angular
Я получаю содержимое SVG с моего сервера, поэтому мне нужно добавить его в HTML через[innerHtml] и for и угловая интерполяция ({{...}}) уже есть в svg. Angular требует добавления sanitizer.bypassSecurityTrustHtml(htmlValue), если я добавляю html извне

при запускеприложение выводит мой svg, но показывает двухсторонний синтаксис привязки данных в виде строки {{Name}} , и я не могу изменить значение при вводе своих данных (see image link below how its looks in the browser)

любая помощь?

import { Component, OnInit} from '@angular/core';
import { LatterDetails } from 'src/Module/LatterDetailsModule';

@Component({
  selector: 'app-edit',
  templateUrl: './edit.component.html',
  styleUrls: ['./edit.component.css'],
})

export class EditComponent implements OnInit {
public Name = "abc";

  	public svgFile;
  	constructor() {} 
  

  ngOnInit() {
  this.svgFile =`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"     viewBox="0 0 2400 3300">
    <defs>
      <style>
        .cls-1,
        .cls-2 {
          font-size: 125px;
          text-anchor: middle;
        }
    
        .cls-1 {
          font-family: "AR CARTER";
        }
    
        .cls-2 {
          font-family: "AR JULIAN";
        }
    
        .cls-3 {
          font-size: 200px;
        }
      </style>
    </defs>
    <image id="images" y="27" width="2424" height="3281" xlink:href='https://openclipart.org/download/282853/Border-68-US--Arvin61r58.svg' />
    <text id="_details.Name_" class="cls-1" x="1200" y="2526.002">
      **<tspan x="1200">Name: {{Name}}</tspan>**
    </text>
    <text id="abc_123" data-name="abc 123" class="cls-2" x="1203" y="665.999">
      <tspan x="1203">abc 123</tspan>
    </text> 
    </svg>`;
  }
}

<div class="container">
  <div class="row">
    <div class="col-sm" [innerHtml]="svgFile | safe: 'html'">
    </div>
        <input [(ngModel)]="Name">
  </div>
</div>

посмотреть, как его показывают в браузере

Answer 1

можно попробовать:

Name: ${Name}</tspan>**