從輸入讀取數據，由管道提供，Angular 2

我有一個文本，其中有輸入。這些輸入是由Pipe提供的（我需要用這些輸入替換一些單詞）。現在我想寫每個輸入不同的單詞，並將其存儲到obj，所以如果我輸入前3個輸入smth像紅色，綠色，蘋果它存儲對象{ 「0」：「紅色」，「1」：「綠色」，「2」：「蘋果」， }從輸入讀取數據，由管道提供，Angular 2

這裏是代碼

管

import { Pipe, PipeTransform } from '@angular/core'; 
import { DomSanitizer } from '@angular/platform-browser'; 

@Pipe({name: 'replacer'}) 
export class SanitizeHtml implements PipeTransform { 
    constructor(private sanitizer: DomSanitizer) {} 

    transform(data, arg) { 
    arg.forEach(item => data = data.replace(new RegExp(item, 'g'), '<input type="text" >')); 
    return this.sanitizer.bypassSecurityTrustHtml(data); 
    } 
}

我想我需要掛在此輸入的東西在管，比如

<input type="text" name="{{i}}" ngModel #prix="ngModel" [id]="i">

但它現在無法正常工作......

我的部件是

@Component({ 
    moduleId: module.id, 
    selector: 'part2', 
    template: ` 
    <p>{{values}}</p> 
    <p>{{abc}}</p> 
    <div [innerHtml]="itemsSource | replacer: abc"></div> 
    <button>Ok</button> 
    <p>Score <input/></p> 
    <pre>{{f.value | json}}</pre> 
    `, 
    providers: [DataService] 

}) 
// @Pipe({name: 'replacer'}) 
export class Part2Component implements OnInit { 

    @ViewChildren ('prix') inputs; 
    public itemsSource: string; 
    public abc: string[]; 
    constructor(public dataService: DataService) { 
    } 

    ngOnInit() { 
    this.abc = this.dataService.getData3(); 
    this.itemsSource = this.dataService.getData2(); 
    } 
}

我使用的DataService

數據

import { Injectable } from '@angular/core'; 

      @Injectable() 
export class DataService { 
       getData2() { 
       let items3: string = 'I like orange, blue, black, pink, rose, yellow, white, black'; 
       return items3; 
      } 
      getData3(){ 
       let items4: string[] = ['black', 'yellow']; 
       return items4; 
      } 
      }

所以，現在我有Picture這個例子中，我希望能夠鍵入單詞並顯示爲對象Picture 2 {「0」：「APPLES」，「1」：「GREEN」，「2」：「BROWN」，}

請幫我...

來源

2017-06-14 Natali

您可以驗證使用的動態組件一樣的角1 $編譯這篇文章Equivalent of $compile in Angular 2，並通過管道創建的輸入插入ngModel。解決這個問題的其他方法是得到如下代碼的輸入值：

import {Component, OnInit, ViewChildren} from "@angular/core"; 
import {SanitizeHtml} from "./PipeTeste"; 
@Component({ 
    selector: 'part2', 
    template: ` 
    <p>{{values}}</p> 
    <p>{{abc}}</p> 
    <div [innerHtml]="itemsSource | replacer: abc"></div> 
    <button (click)="buttonOk()">Ok</button> 
    <p>Score <input/></p> 
    <pre>{{obj}}</pre> 
    `, 
    providers: [SanitizeHtml] 

}) 
// @Pipe({name: 'replacer'}) 
export class Part2Component implements OnInit { 

    @ViewChildren ('prix') inputs; 
    public itemsSource: string; 
    public abc: string[]; 
    public obj: string[]; 
    constructor(public p:SanitizeHtml) { 
    } 

    buttonOk() { 
    let a:any = document.getElementsByClassName('inputValue'); 
    this.obj = []; 
    for(let i in a){ 
     if(a[i] && a[i].value){ 
     this.obj.push(a[i].value) 
     } 
    } 
    } 

    ngOnInit() { 
    this.abc = ['black', 'yellow']; 
    this.itemsSource = 'I like orange, blue, black, pink, rose, yellow, white, black'; 
    } 
}

我希望我幫你。

來源

2017-06-16 13:35:14

從輸入讀取數據，由管道提供，Angular 2

回答

相關問題