Как вставить input в Angular 2

297
15 июня 2017, 08:00

I want to replace certain words with input fields, I have created method, that must replace and Pipe for safe insert of input field, but it doesn't work...What am I doing wrong? Please help! Here is my code Моя задача - заменить определенные слова полями для ввода, есть метода для замены этих слов на поля для ввода и Pipe для безопасного внедрения, но все вместе не работает, помогите, пожалуйста, что я здесь делаю не верно?...

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

Кастомный Pipe

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);
  }
}
READ ALSO
Что делает функция в программе? React.JS

Что делает функция в программе? React.JS

Прохожу курс по ReactJS на Codeacademy

323
Iframe оплата от Яндекса

Iframe оплата от Яндекса

Помогите, пожалуйста

346
Добавить класс active

Добавить класс active

Имеется опросник, где каждый блок вопроса имеет класс (wp-polls)

433