Javascript 从管道提供的输入读取数据，角度2

我有一个文本，其中有输入。这些输入由管道提供（我需要用这些输入替换一些单词）。现在我想在每个输入中写入不同的单词，并将其存储到obj，所以如果我在前3个输入中键入smth，如红色、绿色、苹果，它将存储到object{ “0”：“红色”， “1”：“绿色”， “2”：“苹果”， }

这是代码

烟斗

现在我有了这个例子，我希望能够输入单词并显示为object {“0”：“苹果”， “1”：“绿色”， “2”：“棕色”}

请帮帮我…

您可以验证这篇文章是否使用动态组件，如Angular 1的$compiler，并在管道创建的输入上插入ngModel。解决此问题的另一种方法是获取如下代码所示的输入值：

从“@angular/core”导入{Component，OnInit，ViewChildren}；
从“/PipeTeste”导入{SanitizeHtml}；
@组成部分({
选择器：'part2'，
模板：`
{{values}}

{{abc}}

好啊
得分

{{obj}}
`,
提供者：[SanitizeHtml]
})
//@Pipe（{name:'replacer'}）
导出类Part2组件实现OnInit{
@ViewChildren（“prix”）输入；
公共项来源：字符串；
公共abc:string[]；
公共对象：字符串[]；
构造函数（公共p:SanitizeHtml）{
}
钮扣（）{
设a:any=document.getElementsByCassName（'inputValue'）；
this.obj=[]；
为了（让我进来）{
if（a[i]&&a[i].值）{
this.obj.push（a[i].value）
}
}
}
恩戈尼尼特（）{
this.abc=['黑色'，'黄色']；
this.itemsSource='我喜欢橙色、蓝色、黑色、粉色、玫瑰色、黄色、白色、黑色'；
}
}

我希望我帮助了你

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

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

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