Angular 2 SafeValue必須使用[property] =與輸入綁定

我想用輸入字段來替換某些單詞，我已經創建了方法，必須替換和Pipe才能安全地插入輸入字段，但它不起作用。。我究竟做錯了什麼？請幫忙！這裏是我的代碼Angular 2 SafeValue必須使用[property] =與輸入綁定

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/>'); 
    }); 
    } 
}

我從DataService的

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; 
      } 
      }

數據和我在這裏定製的管道

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); 
    } 
}

我猜，我我非常接近正確的答案，請幫助我...

個

來源

2017-06-13 Natali

爲什麼你要問同樣的問題所有的時間？ – developer033

@ developer033這不是同一個問題 - 我現在工作的任務現在保持不變，是的。但有一些微型任務，它出現在它的工作期間...所以我單獨問，因爲Stackoverflow的建議不要寫一個長的評論，但開放新的問題，我想解決方案不僅會幫助我，但很多人。 – Natali

由於角狀態SafeValue must use [property]=binding 你應該使用屬性綁定，而不是插值：

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

來源

2017-06-14 09:17:34 yurzui

Angular 2 SafeValue必須使用[property] =與輸入綁定

回答

相關問題