Angular 2 SafeValue muss [Eigenschaft] = Bindung mit Eingabe verwenden

Question

Ich möchte bestimmte Wörter durch Eingabefelder ersetzen, ich habe eine Methode erstellt, die ersetzt werden muss und Pipe zum sicheren Einfügen von Eingabefeld, aber es funktioniert nicht .. .Was mache ich falsch? Bitte helfen Sie! Hier ist mein Code

part2.component.ts

import { Component, OnInit} from '@angular/core'; 
import { DataService } from '../sample02-simpleService/data.service'; 
@Component({ 
    moduleId: module.id, 
    selector: 'part2', 
    template: ` 
    <p>{{itemsSource | sanitizeHtml}}</p>  
    `, 
    providers: [DataService] 

}) 
export class Part2Component implements OnInit { 
    public itemsSource: string; 
    constructor(public dataService: DataService) { 
    } 

    ngOnInit() { 
    this.abc = this.dataService.getData3(); 
    this.itemsSource = this.dataService.getData2(); 
    this.abc.forEach(str => { 
     let regExp = new RegExp(str.toString(), 'g'); 
     this.itemsSource = this.itemsSource.replace(regExp, '<input/>'); 
    }); 
    } 
} 

I-Daten Nehmen von Data

import { Injectable } from '@angular/core'; 
      @Injectable() 
export class DataService { 
      getData2() { 
       let items3: string = 'Das ist unsere Erde. Die Erde ist ein Planet. ' + 
       'Sie ist der einzige Planet auf dem wir leben können. ' + 
       'Auf keinem anderen Planet gibt es Menschen oder Tieren.Es gibt acht Planeten. ' + 
       'Dass ist meine Lieblings.'; 
       return items3; 
      } 
      getData3(){ 
       let items4: string[] = ['Planeten', 'Planeten', 'eine', 'Tiere', 'viele', 'Planet', 'keine', 'meine']; 
       return items4; 
      } 
      } 

Und ich habe benutzerdefinierte Rohr hier

import { 
    Pipe, 
    PipeTransform 
} from '@angular/core'; 
import {DomSanitizer, SafeHtml} from '@angular/platform-browser'; 
@Pipe({ 
    name: 'sanitizeHtml' 
}) 
export class SanitizeHtml implements PipeTransform { 

    constructor(private _sanitizer: DomSanitizer) {} 

    transform(v: string): SafeHtml { 
    return this._sanitizer.bypassSecurityTrustHtml(v); 
    } 
} 

Ich denke, ich bin sehr nah an richtige antwort, bitte, hilf mir ...

Answer 1

Als Winkelzustände SafeValue must use [property]=binding Sie Eigenschaft Bindung statt Interpolation verwendet werden soll:

<p [innerHTML]="itemsSource | sanitizeHtml"></p>